7

Приложение написано на PHP + JAVASCRIPT

На странице отображается около 2000 строк и более (если отображается мало - около 100, то никаких проблем); В таблице в коде строки задействованы несколько style=".." , class="..", id="..", onclick=".." Так же на экране кроме таблицы содержатся элементы с атрибутом стиля (position:fixed), не знаю может это тоже влияет на что-то?

JavaScript отслеживает скроллинг экрана, для выполнения некоторых функций (добавить кнопку "Наверх", подгрузить еще строки при прокрутке вниз...)

Так вот при отображении такого количества строк на экране браузер начинает ощутимо тормозить..

После долгих поисков сложилось мнение, что при большом количества элементов тормозить могут:

  • функции JavaScript которые пересчитывают большое количество элементов на экране,

  • теги style="",

  • может быть элементы со стилем position:fixed..

Для того чтобы устранить крайнее предположение убрал таблицу с заказами в блок фиксированных размеров и Overflow-y:auto; В результате чего тормозить стало ЕЩЕ БОЛЬШЕ ! :))

Может кто-нибудь сталкивался с подобной проблемой? Может быть есть список явлений и конструкций, которые могут ощутимо тормозить работу браузера ??? Помогите ))

UPDATE: Сделал запись Timeline, во время скроллинга данной страницы. Timeline

Увеличенный участок: Увеличенный участок 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, вот скрин: Timeline - Other

Причем! Если данный контент виден на экране и в обертке нет стиля display:none; функция alert() выполняется быстро, как положено )) Удивительно!

7
  • 3
    В большинстве современных браузеров есть возможность профайлить код. Пробовали?
    – KoVadim
    28 ноя 2016 в 14:11
  • 2
    Обычно тормозят кривые скрипты. И браузер это покажет, если списать timeline.
    – Qwertiy
    28 ноя 2016 в 14:57
  • Пробовал, но не очень силен в этом, не выявил точную ошибку.. Так же пробовал исключать постепенно функции которые задействованы в приложении вообще.. В итоге тормозить перестало, но убрать пришлось очень многое, затем стал добавлять поочередно и к сожалению не могу на данный момент выявить... Сейчас пытаюсь с нуля добавлять: сперва таблицу со строками, затем поочередно функции и стили.. Но это такой долгий процесс (( 28 ноя 2016 в 15:30
  • Сделал запись Timeline во время этого три раза прокрутил мышкой скролл, вот что получилось! см. Выше так же в консоле 2 предупреждения: Handling of 'mousewheel' input event was delayed for 229 ms due to main thread being busy. Consider marking event handler as 'passive' to make the page more responsive , на что обратить внимание??? 28 ноя 2016 в 15:43
  • у вас очень много на рендеринг тратиться времени. скорее всего в функции скрола идет работа с домом, которая вызывает рендинг, покажите код)
    – ThisMan
    28 ноя 2016 в 16:05

2 ответа 2

5

Попробуйте сделать такие шаги:

  1. Постарайтесь избавится от лишнего поиска элементов в dom

    плохо:

    for(row in table){
     $("selector").find("selector2").css("...");
    }
    

    хорошо:

    var _$elem = $("selector").find("selector2");
    
    for(row in table){
     _$elem.css("...");
    }
    
  2. Убедитесь, что, когда вы навешиваете обработчик события, вы его потом убираете. Следить за этим нужно, чтобы вдруг так не оказалось, что скролл слушают сразу несколько обработчиков или что обработчики продублировались.

    Например:

    //устанавливаем
    var eventListener = el.addEventListener("click", eventHandler, false);
    
    //когда не нужен удаляем
    el.removeEventListener('click', eventListener, false);
    
  3. Постарайтесь избавится от лишнего вызова тяжелых функций и рендеринга при скролле. Например, слушайте только каждый десятый скролл или отрисовывайте не все, а только то, что действительно поменялось.

  4. Пожмите картинки. Даже если вы делаете export for web в фотошопе, то например tinyPng жмет их еще сильнее (Только осторожней с градиентами, следите чтобы не сильно побились)

  5. Подумайте в сторону модульной организации кода на клиенте. Например RequireJs или React-Redux или что-нибудь в этом духе.

2
  • Комментарии не предназначены для расширенной дискуссии; разговор перемещён в чат.
    – user177221
    21 дек 2016 в 19:00
  • Первый "хорошо" - это тоже плохо...
    – Qwertiy
    21 дек 2016 в 19:40
0

Так же тормозит браузер - CSS !

html,body {
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

В моем случае тормоза (выраженные в Timeline - Other) были из-за указания такого свойства в css файле. Естественно тормоза заметны при большом количестве контента! И к удивлению если контент спрятан с экрана (display:none)

Может кому-то будет полезно ))

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.