Как фиксить фризы при скроле?

Question

[DoubleWish]

Всем привет! Как вы фиксите баги при прокрутке страницы? Не могу определить, где проседает производительность и как это вообще фиксить? Пользуюсь все, что только не находил (тормозилка + will-change + pointer-events + vanilla), но проседания все равно есть. Тормозит почти всегда в момент исполнения js. Или например при использовании библиотеки waypoint.

Answer 1

[Alexander Litvinenko]

А вы используете requestanimationframe? фризы могут быть от того что евентлуп жса не синхронизирован с событием отрисовки страницы самим браузером.

Вполне может быть вы также меняете очень часто стили? это тоже неверно, DOM дерево очень медленное и стили тоже в нем, попробуйте задать стиль анимацией, тогда отрисовка переходит к браузеру и меняйте точку конца анимации в зависимости от действий пользователя.

Comments

[DoubleWish]

Вот сколько читал про raf - не понимаю, где его применять, если почти вся анимация на css, напрмер. Переводить лучше в JS.

[Alexander Litvinenko]

когда вы делаете штуки вроде смены стилей по событию скрола или другому бысто наступающему, нужна эта функция. Анимацию, если не часть логики весьма правильно в цсс оставить.

Answer 2

[duck_nukem]

-webkit-overflow-scrolling: touch;