Приложение написано на PHP + JAVASCRIPT
На странице отображается около 2000 строк и более (если отображается мало - около 100, то никаких проблем);
В таблице в коде строки задействованы несколько style=".."
, class=".."
, id=".."
, onclick=".."
Так же на экране кроме таблицы содержатся элементы с атрибутом стиля (position:fixed
), не знаю может это тоже влияет на что-то?
JavaScript отслеживает скроллинг экрана, для выполнения некоторых функций (добавить кнопку "Наверх", подгрузить еще строки при прокрутке вниз...)
Так вот при отображении такого количества строк на экране браузер начинает ощутимо тормозить..
После долгих поисков сложилось мнение, что при большом количества элементов тормозить могут:
функции JavaScript которые пересчитывают большое количество элементов на экране,
теги
style=""
,может быть элементы со стилем
position:fixed
..
Для того чтобы устранить крайнее предположение убрал таблицу с заказами в блок фиксированных размеров и Overflow-y:auto;
В результате чего тормозить стало ЕЩЕ БОЛЬШЕ ! :))
Может кто-нибудь сталкивался с подобной проблемой? Может быть есть список явлений и конструкций, которые могут ощутимо тормозить работу браузера ??? Помогите ))
UPDATE:
Сделал запись Timeline, во время скроллинга данной страницы.
ВОТ ПРИМЕР КОДА СТРОКИ ИЗ ТАБЛИЦЫ:
<tr></tr>
<tr><td>
<table>
<tbody><tr>
<td>
<div>№ 133334</div>
</td>
<td>
<div>
<div tit="Статус" onreset="selectStatus('133770');">
<span>Новый</span>
<span></span>
<div>
<span name="новый" forp="1">Новый</span>
<span name="333" forp="5">333</span>
<span name="в производстве" forp="3">В производстве</span>
<span name="123123" forp="2">123123</span>
<span name="в пути" forp="4">В пути</span>
<span name="123123" forp="7">123123</span>
<span name="123123" forp="8">123123</span>
<span name="произведен" forp="12">Произведен</span>
<span name="123123" forp="13">123123</span>
<span name="555" forp="15">555</span>
<span name="123123" forp="14">123123</span>
<span name="временной" forp="16">Временной</span>
<span name="прозвонен" forp="17">Прозвонен</span>
<span name="выполнен" forp="10">Выполнен</span>
<span name="списан" forp="11">Списан</span>
</div>
<input type="hidden" value="1">
</div>
</div>
</td>
<td>
<div>
<div tit="Сотрудник" onreset="selectWaiter('133770','');">
<input type="text">
<span>Сотрудник</span>
<span></span>
<div>
<span name="1112" forp="197">1112</span>
<span name="сергей щербинка" forp="132">Сергей Щербинка</span>
<span name="даниёр" forp="143">Даниёр</span>
<span name="александр подольск" forp="120">александр подольск</span>
<span name="рустам" forp="77">Рустам</span>
<span name="дима" forp="83">Дима</span>
<span name="мишакино" forp="158">МишаКино</span>
<span name="коля " forp="167">Коля </span>
<span name="андрейка" forp="117">Андрейка</span>
<span name="олег" forp="43">Олег</span>
<span name="дима самсон" forp="123">Дима Самсон</span>
<span name="лазиз" forp="64">Лазиз</span>
<span name="олег темка" forp="156">Олег Темка</span>
<span name="андрей сержант " forp="111">Андрей Сержант </span>
<span name="район" forp="37">Район</span>
<span name="никита " forp="183">Никита </span>
<span name="аброр" forp="154">Аброр</span>
<span name="миша" forp="119">Миша</span>
<span name="вальдемар" forp="128">Вальдемар</span>
<span name="саша пеший" forp="150">Саша пеший</span>
<span name="сергей пушкинская" forp="165">Сергей Пушкинская</span>
<span name="ваня" forp="41">Ваня</span>
<span name="марина" forp="147">Марина</span>
<span name="валера" forp="190">Валера</span>
<span name="ванюшка" forp="161">Ванюшка</span>
<span name="алам" forp="2">Алам</span>
<span name="артем" forp="5">Артем</span>
<span name="гера" forp="8">Гера</span>
<span name="максим" forp="20">Максим</span>
<span name="паша" forp="23">Паша</span>
<span name="самовывоз" forp="24">САМОВЫВОЗ</span>
<span name="уася" forp="195">Уася</span>
</div>
<input type="hidden" value="">
</div>
</div>
</td>
<td>
<div tit="Филиал" onreset="for_filial('133770')">
<span>Щербинка</span>
<span></span>
<div>
<span name="щербинка" forp="1">Щербинка</span>
<span name="бутово" forp="2">Бутово</span>
<span name="ясенево" forp="3">Ясенево</span>
<span name="коммунарка" forp="4">Коммунарка</span>
<span name="подольск" forp="5">Подольск</span>
<span name="тестовый филиал" forp="6">Тестовый филиал</span>
</div>
<input type="hidden" value="1">
</div>
</td>
<td>
<div tit="Точка продаж" onreset="for_point('133770')">
<span>Основная</span>
<span></span>
<div>
<span name="основная" forp="1">Основная</span>
<span name="123" forp="2">123</span>
<span name="333" forp="3">333</span>
<span name="43" forp="4">43</span>
</div>
<input type="hidden" value="1">
</div>
</td>
<td><span title="Статистика клиента" onclick="popup('client_stat','id=','600','400')">!!!</span> </td>
<td>
<div>
<span></span>
</div>
</td>
<td>
<div>
<span></span>
<div>
<span>80 мм</span>
<span>Товарный</span>
<span>Два тов.</span>
<span>50 мм</span>
<span>Сборка</span>
</div>
</div>
</td>
<td>
<div>
<span></span>
</div></td>
</tr>
</tbody></table>
</td></tr>
На самом деле это только часть строки, но это уже дает ощутимые последствия, когда таких строк на экране много...
UPD:
После решения ряда проблем с тормозами, столкнулся с новой неизвестной:
даже при условии что блок с таблицей (с большим контентом) не виден на экране (display:none), при вызове элементарной функции alert('123'), появляются тормоза, которые в Timeline отражаются как Other, вот скрин:
Причем! Если данный контент виден на экране и в обертке нет стиля display:none; функция alert() выполняется быстро, как положено )) Удивительно!