Зависает браузер при выводе большого объема записей с БД (items.length >= 5000)?

Question

[KzLIFE]

Комплектация компьютера и программного обеспечения компьютера, на котором была тестирована страница и поднимался вэб-сервер (2 в 1):

Процессор: Intel Corei 7 3.2 Ghz
ОЗУ: 8 gb
Жесткий диск: SSD 256 gb
Видео карта: Nvidia GTS 250
Операционная система: Win 8.1 x64
Браузер: Все.
Веб сервер: Apache/2.2.22 (Win32) + Mysql 5.5.25 + PHP 5.3.13

Языки программирования: PHP, Javascript
Фреймворки: jquery.

$().ready(function(){
    $.ajax({
            type: "GET",
            url: "/ajax/items.php",
            timeout: 15000,

            data: {
                q: $(".title #q").val()
            },

            success: function (data) {
            var json = eval('(' + data + ')')
          
           // результат json = items = {
           // name: value,
           // date: value,
          //  time: value
           // }
          //  json["items"].length >= 12000

            for($i = 0; $n = 1; json["items"].length > $i; $i++){
           $(".content").append('<div style="width:100%; height:46px; border-bottom:1px solid #DDD"><b>'+json["items"][i]["name"]+' - <span>'+json["items"][i]["date"]+'</span> - '+json["items"][i]["time"]+'</b></div>');
            }
            }
            })
})

Здесь показано лишь 2% кода. Это вэб приложение с необходимостью получать данные каждые 3 секунды. Если вы скажите ищи причину в остальных 98% кода то сразу скажу, что, ту часть кода которую я показал, хватает для что бы началось снижение производительности браузера.

Answer 1

[Петруша Укропов]

Для начала уменьшить количество обращений к dom, заменив

for($i = 0; $n = 1; json["items"].length > $i; $i++){
           $(".content").append('<div style="width:100%; height:46px; border-bottom:1px solid #DDD"><b>'+json["items"][i]["name"]+' - <span>'+json["items"][i]["date"]+'</span> - '+json["items"][i]["time"]+'</b></div>');
            }

на

var html = '';
for($i = 0; $n = 1; json["items"].length > $i; $i++){
           html += '<div style="width:100%; height:46px; border-bottom:1px solid #DDD"><b>'+json["items"][i]["name"]+' - <span>'+json["items"][i]["date"]+'</span> - '+json["items"][i]["time"]+'</b></div>';
            }
 $(".content").append(html);

Или что-то подобное

Comments

[KzLIFE]

Получается, увеличивая обращения в DOM во время работы скрипта, я теряю производительность браузера? т.е заменив мою часть кода вашим я решу проблему зависания? до и после, выполнения скрипта (интервал 5 секунд после выполнения скрипта)

[Deerenaros]

@KzLIFE Вряд ли полностью проблема решиться, но как вариант. DOM очень, очень медлителен и 1000 обращений в секунду уже ощущается очень сильно. А здесь более 5000 обращений и попытка их сделать так быстро, как только можно. На пару секунд браузер точно повиснит намертво.

[KzLIFE]

Спасибо!

Answer 2

[Mikhail Osher]

1) Укажите параметр dataType: 'json' в $.ajax(), чтобы автоматически получить JSON.
2) Используйте createDocumentFragment() для вставки элементов в DOM.
3) Оптимизируйте цикл

var frag = document.createDocumentFragment();
for (var i = 0, len = items.length; i < len; ++i) {
    // bla bla bla create div
   frag.appendChild(div);
}
document.getElementsById('#contacts').appendChild(frag); // Лучше юзайте ID для контейнера.

Answer 3

[Deerenaros]

Как вариант, можно по /ajax/items.php возвращать не все 5000 элементов, а кусками. Например, по /ajax/items.php?count возвращать количество страниц, а по /ajax/items.php?number возращать страницу из 500 элементов. И при добавлении на страницу использовать небольшую задержку в миллисекунду.

Правда, вопрос: почему нельзя сделать PHP-скрипт, который возвращал сразу готовую страницу со всем контентом. Зачем ajax?

Comments

[KzLIFE]

Здесь показано лишь 2% кода. Это вэб приложение с необходимостью получать данные каждые 3 секунды. Если вы скажите ищи причину в остальных 98% кода то сразу скажу, что, ту часть кода которую я показал, хватает для что бы началось снижение производительности браузера.

[Deerenaros]

@KzLIFE Тогда снижайте кол-во обращений к DOM, и обновляйте его пачками. А ещё лучше и запрашивать с сервера пачками: запросил, обновил, очистил память, подождал и по новой; а то удивляемся, почему браузер ест память тоннами.

[KzLIFE]

спасибо!

Answer 4

[Павел]

Конкатенация - дорогое удовольствие в вашем случае. Попробуйте следующим образом через массив:

var html = [];
for($i = 0; $n = 1; json["items"].length > $i; $i++){
    html.push('<div style="width:100%; height:46px; border-bottom:1px solid #DDD"><b>', json["items"][i]["name"], ' - <span>', json["items"][i]["date"], '</span> - ', json["items"][i]["time"], '</b></div>');
            }
 $(".content").append(html.join(""));

А так же выносите стили в css.

Answer 5

[Павел]

Итог: объеденяем все озвученные решения воедино и получаем оптимальный вариант :)

Answer 6

[glite]

Попробуй обработать все на стронe items.php, циклом php: echo"$переменая из php["items"][i]["name"].$php["items"][i]["date"] .$php["items"][i]["time"]"; а ответ просто вставить $(".content").append(data) вырастить нагрузка на сервер но снимится нагрузка с DOM