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

Question

KzLIFE @KzLIFE

Зависает браузер при выводе большого объема записей с БД (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% кода то сразу скажу, что, ту часть кода которую я показал, хватает для что бы началось снижение производительности браузера.

Вопрос задан более трёх лет назад
4174 просмотра

Комментировать

Подписаться 4 Оценить Комментировать

Answer 1 · 2014-04-09 00:07:20

Для начала уменьшить количество обращений к 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);

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

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

Войдите на сайт