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

Комплектация компьютера и программного обеспечения компьютера, на котором была тестирована страница и поднимался вэб-сервер (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% кода то сразу скажу, что, ту часть кода которую я показал, хватает для что бы началось снижение производительности браузера.
  • Вопрос задан
  • 4149 просмотров
Решения вопроса 5
@artishok
кратко
Для начала уменьшить количество обращений к 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);

Или что-то подобное
Ответ написан
miraage
@miraage
Старый прогер
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 для контейнера.
Ответ написан
Комментировать
Deerenaros
@Deerenaros
Программист, математик, задрот и даже чуть инженер
Как вариант, можно по /ajax/items.php возвращать не все 5000 элементов, а кусками. Например, по /ajax/items.php?count возвращать количество страниц, а по /ajax/items.php?number возращать страницу из 500 элементов. И при добавлении на страницу использовать небольшую задержку в миллисекунду.

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

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.
Ответ написан
Комментировать
@milast
Итог: объеденяем все озвученные решения воедино и получаем оптимальный вариант :)
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@glite
Попробуй обработать все на стронe items.php, циклом php: echo"$переменая из php["items"][i]["name"].$php["items"][i]["date"] .$php["items"][i]["time"]"; а ответ просто вставить $(".content").append(data) вырастить нагрузка на сервер но снимится нагрузка с DOM
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы