Тормозит браузер, возможные причины?

#javascript #css #производительность #оптимизация_сайтов

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

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

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

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

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


функции JavaScript которые пересчитывают большое количество элементов на экране,
теги style="",
может быть элементы со стилем position:fixed..


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

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

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


Увеличенный участок:


ВОТ ПРИМЕР КОДА СТРОКИ ИЗ ТАБЛИЦЫ:






№ 133334




Новый


Новый
333
В производстве
123123
В пути
123123
123123
Произведен
123123
555
123123
Временной
Прозвонен
Выполнен
Списан









Сотрудник


1112
Сергей Щербинка
Даниёр
александр подольск
Рустам
Дима
МишаКино
Коля 
Андрейка
Олег
Дима Самсон
Лазиз
Олег Темка
Андрей Сержант 
Район
Никита 
Аброр
Миша
Вальдемар
Саша пеший
Сергей Пушкинская
Ваня
Марина
Валера
Ванюшка
Алам
Артем
Гера
Максим
Паша
САМОВЫВОЗ
Уася






 
Щербинка


Щербинка
Бутово
Ясенево
Коммунарка
Подольск
Тестовый филиал





 
Основная


Основная
123
333
43




!!!










80 мм
Товарный
Два тов.
50 мм
Сборка












На самом деле это только часть строки, но это уже дает ощутимые последствия, когда
таких строк на экране много...

UPD:
После решения ряда проблем с тормозами, столкнулся с новой неизвестной:
даже при условии что блок с таблицей (с большим контентом) не виден на экране (display:none),
при вызове элементарной функции alert('123'), появляются тормоза, которые в Timeline
отражаются как Other, вот скрин:


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

Ответы

Ответ 1

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


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

плохо:

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


хорошо:

var _$elem = $("selector").find("selector2");

for(row in table){
 _$elem.css("...");
}

Убедитесь, что, когда вы навешиваете обработчик события, вы его потом убираете. Следить
за этим нужно, чтобы вдруг так не оказалось, что скролл слушают сразу несколько обработчиков
или что обработчики продублировались. 

Например:

//устанавливаем
var eventListener = el.addEventListener("click", eventHandler, false);

//когда не нужен удаляем
el.removeEventListener('click', eventListener, false);

Постарайтесь избавится от лишнего вызова тяжелых функций и рендеринга при скролле.
Например, слушайте только каждый десятый скролл или отрисовывайте не все, а только
то, что действительно поменялось.
Пожмите картинки. Даже если вы делаете export for web в фотошопе, то например tinyPng
жмет их еще сильнее (Только осторожней с градиентами, следите чтобы не сильно побились)
Подумайте в сторону модульной организации кода на клиенте. Например RequireJs или
React-Redux или что-нибудь в этом духе.


Ответ 2

Так же тормозит браузер - 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)

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