Как в dev. tools браузеров (например firefox) на вкладке profiling понять почему тормозит страница?

#javascript #html #css #браузер #css_animation

Есть сайт. При прокрутке страницы в некоторых местах страница подтормаживает (падает
фпс), так же при взаимодействии с некоторыми элементами и в моменты некоторых анимаций
тоже подтормаживает. Причем чем больше размер экрана тем больше падает фпс. В разных
браузерах по разному подает фпс, например в хроме тормозов почти не заметно, а в мозиле
очень тормозит. Про мобильные браузеры молчу.

Как найти и распознать из-за чего так происходит?

    

Ответы

Ответ 1

Надо помнить, что браузер однопоточный - все вычисляет последовательно. Тормозит
- это значит, например, ты кнопку нажал, а реакции долго нет. Почему долго нет реакции?
Потому, что браузер ЕЩЕ занят длинными расчетами в сложном скрипте, выполнение которого
было запущено ДО того, как ты кнопку нажал. Ты кнопку нажал, и функция-обработчик ставится
в ОЧЕРЕДЬ выполнения скриптов, причем, в очереди она ПЕРВАЯ ПОСЛЕ того, как выполнится
твой сложный скрипт. 

Чтобы такого не было, надо сложный скрипт разбить, например, сеттаймаутами на куски,
чтобы получились "окна" в его выполнении. Если "куски" будут по 10мс, то можно говорить
о том, что частота обновления в визуальной области браузера будет 60 гц (60 кадров
в секунду). Но это проще сформулировать, чем сделать. Если скрипт сложный, например,
простая с виду игра типа Пакмэна, где все очень ХИТРО связано, то надо потратить время
(переписывать придется большой кусок игры, так как очень много связанных вещей нарушается
при вводе таймеров в код), чтобы разбить выполнение длинных скриптов на куски.

Девтулс браузера позволяет увидеть, какой код за каким выполняется и какую длительность
имеет. Позволяет оценить, насколько эффективно используются возможности браузера по
просчетам - либо сложные расчеты выполняются в куче без "окон" (это плохо, тормозит
игра - длительный расчет  + длительный простой), а потом длинный период простоя (idle),
либо сложные расчеты разбиты на мелкие куски, которые таймерами разнесены по времени
(это хорошо - короткие расчеты + короткие простои).