jquery ajax - оооочень медленно :(
Всем привет.
Подскажите пожалуйста новичку, в чем заключается моя ошибка. Задача простая: вывод данных из БД на страницу. Как это делаю я: При загрузке страницы вызываю функцию $(document).ready(function(e) {
ajaxOutput("<?php echo HOST.'/index.php'; ?>","#idOutputTable","<?php echo $smile['ajax_error']; ?>","viewClients");
});
которая имеет вид function ajaxOutput(page,outputId,errorText,ajaxName,str) {
s = (str == undefined) ? "ajax=" + ajaxName : "ajax=" + ajaxName + "&findStr=" + str;
$.ajax({
type:"POST",
url:page,
data:s,
dataType:"html",
success: function(res) {//alert(res);
$(outputId).html(res);
return true;
},
error: function() {
msg(errorText,"error",5000);
return false;
}
});
return false;
}
нечего криминального вроде нет. Далее функция передает данные в php файл, который делает запрос к БД, формирует таблицу с результатами и отдает ее функции. Что имею в итоге: ~250 (!!!) записей в БД и время их вывода на страницу около 5 (!!!) сек! Что не так делаю то :( Как это вообще ПРАВИЛЬНО делается ? Заранее благодарю! |
Непонятно почему таблица по ajax грузится а не вместе со страницей.
Минус в том что эта таблица небудет замечена поисковиками. Плюс в том что страница будет грузится быстрее. к самому js коду претензий вроде нет. сколько времени занимает прямое обращение по url из строки браузера ? |
Цитата:
Цитата:
Вообще, видимо на самом дело в php скрипте, но там тоже особо никакого криминала нет, если кратко: switch($POST['ajax']) {
case "var":
$query = query("SELECT * FROM `table`");
echo "<table>";
foreach ($query as $key => $val) {
echo "<tr>";
echo "<td>".$val['id']."</td>";
echo "<td>".$val['name']."</td>";
echo "<td>".$val['sum']."</td>";
echo "</tr>";
}
echo "</table>";
break;
Понятно, что есть там кое-какие вычисления простенькие, но что б 5 секунд обрабатывалось ~250 строк... |
Смотрите
success: function(res) {//alert(res);
$(outputId).html(res);
return true;
},
alert() срабатывает через полсекунды после входа на страницу. Т.е. это значит, что функция отработала и данные получила, правильно ? После этого страница (не браузер) подвисает секунды на 4 и только после этого загружается контент в див. Как это понимать то ? Компьютер достаточно мощный, браузер хром последней версии.. Нечего не понимаю :( |
Цитата:
впрочем дело тут не в ajax. ссылку на страницу дайте пожалуйста странно что подвисает, возможно запрос не асинхронный. добавьте async :true, быстрее не станет , но должно решить проблему с подвисанием браузера |
Да полный отказ от ajax не проблема, но просто хочется сделать именно так, хотя бы для саморазвития.
Ссылку сейчас сделаю. |
|
это что такое ?
http://test1.ru/3smile/?page=404 |
Это просто локальный адрес.
з.ы. async :true проблему подвисания не решило :( |
короче насколько я понял всё работает отлично.
просто время отклика сервера около 3х секунд самый разумный способ добится повышения производительности это атказаться от ajax, потому что из ajax 3 секунды ожидания вы невыкинете ни как. всё что можно попробывать сделать для ajax это асинхронная загрузка и смена хостинга/тарифа Это неокончательное утверждение, а поверхностная оценка. Дополнительно можете замерить время генерации таблицы на сервере, но я почти уверен что оно занемает не более пары сотен милисекунд |
Так локально то оно работает так же точно! :) По времени в смысле. На 3х разных компьютерах :(
|
Что значит локально ? c Денвера чтоли ?
на денвере у мну waiting 89ms против 3000 в инете. |
Ну да.
Это всё хозяйство не для интернета, функционировать будет на одной машине, на которой подниму сервер с БД, ну или на крайний случай поставлю тот же денвер, не принципиально. |
Одно все-таки не понятно: по какой причине страница на несколько секунд подвисает. Неужели из-за того, что js полученные данные на страницу вставляет ? Так их, по сути, не так уж и много.
Даже если в запрос поставить LIMIT 0,50 - все равно около двух секунд "висит". Ерунда какая-то :( |
Цитата:
|
Хотя все и так понятно. Вы вставляете огромное количество таблиц/ячеек через innerHTML я полагаю, да и что-то еще, ибо даже диалог поиска открывается через секунду после клика.. Что-то у вас на клиенте затормаживает все.
|
3с, в network смотрел.
Вы вставляете огромное количество таблиц/ячеек через innerHTML я полагаю, через .html(); Я последние минут 15 через профилирование пытался замерить, но неудобно. Надо прям в коде замерерить сколько html работает. |
и подобным образом писать не стоит:
$("#idP").html("");
$("#idP").append('<select id="idPastleDoctors" class="styled nonEnter" name="doctor">' + sel + '</select>');
пишите так: $("#idP").html('<select id="idPastleDoctors" class="styled nonEnter" name="doctor">' + sel + '</select>');
У вас много написано совершенно не думая о скорости работы, запросы к элементам не нужно делать так: $("#idError").css("top",$(window).scrollTop());
$("#idError").html(text);
$("#idError").show(500);
нужно писать так: $("#idError").css("top",$(window).scrollTop()).html(text).show(500);
ну или на крайняк так: var elem = $("#idError");
elem.css("top",$(window).scrollTop());
elem.html(text);
elem.show(500);
Это увеличит скорость работы JavaScript в разы |
Понятно. Что ничего не понятно :) Но все равно - спасибо откликнувшимся за потраченное на меня время.
|
Цитата:
|
devote, благодарю, что обратили внимание, обязательно займусь оптимизацией.
|
вот еще банальный пример:
$(".loader").css("top",($(window).height()-$(".loader").height())/2 + $(window).scrollTop() + "px");
$(".loader").css("left",($(window).width()-$(".loader").width())/2 + $(window).scrollLeft() + "px");
меняем так: var
loader = $(".loader"), // лишь один раз заставляем jQuery искать элемент
wnd = $(window); // лишь один раз заставляем jQuery искать элемент
loader
.css("top",(wnd.height()-loader.height())/2 + wnd.scrollTop() + "px")
.css("left",(wnd.width()-loader.width())/2 + wnd.scrollLeft() + "px");
Старайтесь как можно меньше делать вызовы функций к которым часто нужно обращаться. |
Отлично, не знал, что так
|
Цитата:
var timer= function (){
var lastTime=new Date().getTime();
return function(){
var time=new Date().getTime();
console.log('время > ', time-lastTime);
lastTime=time;
}
};
var test=timer();
alert('быстро выключи меня');
test();
В консоле будет видно сколько работала функция alert. Исследуй подобным образом время работы функции HTML. test() при необходимости можно вызывать несколько раз, и замерить каждый интерисующий этап, но нас больше всего HTML() интересует. меня вот эта шняга сбивает с толку, это запрос при открытии диалога. <img width="100%" src="http://www.spbvet.org/2013.png"/> жду замеров. |
Если правильно понял куда пихать функцию, то:
1. Если вставить ее в php скрипт (т.е. после вывода таблицы идет раздел <script>, там пара функций), то время получается ~800 2. Если вставлять ее непосредственно в success: function(res) {}, то время получается ~500 Но самое главное, до меня дошло, откуда "подвисание" это берется. Только ногами сильно не пинайте..:) Это все стилизация селектов и ui datapicker. Получается в каждой строке по селекту и по календарю - из-за этой байды вся проблема :) |
По ссылке обновил, можете убедиться, если интересно :)
|
уже быстрее работает.
|
Намного :)
Еще раз спасибо, узнал много нового. |
Немного на другую тему, но может кто подскажет.
Есть скрипт, который загружает файлы на сервер через AJAX. На локалхосте все работает, а в продакшне люди жалуются, что грузит например 1 файл из трех. Как такое может быть и в какую сторону копать? Думаю на медленный интернет, но вроде это не играет роли? Разве AJAX разбивает данные на части? |
win32s, тут без хрустального шара не подсказать, а свой я потерял, к сожалению.
|
Кто же знает, как вы грузите.
Что на сервере (php? node?) Может медленный инет, большие файлы и по таймауту серверный скрипт отключается. Тогда надо проверить настройки сервера (в php) Тестируйте сами в продакшене, смотрите сетевые ошибки. Сделайте в серверном скрипте логи и смотрите их. |
Nexus, код отправки примерно такой, но врядли в нем может быть ошибка, это же копипаст с учебника
$.ajax({url: $("#imgForm").attr('action'),
type: 'post',
data: window.FormDataAll,
contentType: false,
processData: false,
/*async:false,*/
success: function(data)
{
$("#err1").hide();
window.FormDataAll = null;
window.imgArr = {};
$("#js-file-list *").remove();
},
Весь код большой, 200 строк примерно. Я не против оплатить консультацию / дебаг, если кто возьмется . Но беда в том, что неясно как отловить ошибку - люди доступ через тимвьювер не дают к своим устройствам где "не работает". |
Причем тут код отправки.
Допустим пользователь выбирает для отправки много файлов. Серверный скрипт работает долго, загружая их. И слетает по таймауту. Надо смотреть какой таймаут установлен и может быть увеличивать его. Другой подход - пользователь выбирает много файлов, но вы их грузите по одному. Загрузился один, начинаете загрузку следующего. Много раз вызывается серверный скрипт, но каждый раз он работает короткое время и таймаута не возникает. |
voraa,серверный скрипт залогирую + увеличу таймер.
Гружу вроде все вместе, код выше так делает. По уму, правильнее разбивать по одному? |
Цитата:
Универсального решения нет. |
Цитата:
Хотя метод дурной. В одной конторе мне тоже жаловались, что медленно, с ошибками....(по их локальной сети с внутренним сервером) Я прихожу к ним, сажусь за комп - все летает. Оказывается они пускали меня за комп в обед или вечером, когда сеть не нагружена. А как все принимаются за работу так труба. |
voraa, в том то и беда, что сложно отладить. Наверное, лучшим вариантом будет взять готовый какой-то jQuery фото плагин. Мне надо, по факту, загружать до 5 файлов картинок, это типа хостинга картинок. Может, есть уже отлаженные вещи.
p.s. не могу поставить плюс, пишет ошибку. |
Цитата:
Я у вас в коде вижу success. А функция для error есть? |
voraa, не было, да. По итогу - в логах апача оказались ошибки max_post_size, в общем передавалось 5 файлов, по 5 мб, а максимальный размер был 10Мб.
В итоге, взял готовый плагин отсюда https://github.com/hayageek/jquery-upload-file/ . |
| Часовой пояс GMT +3, время: 11:57. |