Если их вовремя не выявить или не обратить на них внимание, они нарастут как снежный ком и оптимизировать сайт придётся заново. Причём, этот процесс будет уже гораздо длительнее и сложнее. Поэтому, в процессе достижения оптимальной скорости загрузки, исправить сайт просто пройдясь по верхам не достаточно. Нужно зреть в корень.
Одна из проблем, которая чаще всего не лежит на поверхности, и с которой успешно справляется наша команда — оптимизация обработчиков ввода и событий. Обойтись без них не возможно, поскольку страница не будет корректно работать и пользователь не сможет с ней взаимодействовать. Проводя настройку сайта, необходимо приложить максимум усилий, чтобы минимизировать временные потери в процессе рендеринга или работы с контентом. И это — непростая задача, выполнить которую под силу только опытным веб-разработчикам. Поэтому, прежде чем заказать оптимизацию сайта или его написание, не стесняйтесь детально узнать о практическом опыте специалистов и посмотреть на их работы.
Что такое обработчики и какой потенциальный вред они могут нести
Обработчики — это определённые процессы, или инструменты, которые позволяют браузеру откликаться на события или обрабатывать поступившую к нему информацию из вне. Это могут быть любые действия пользователя, к примеру, скролинг страницы. Для того, чтобы они могли выполнять свою работу, им нужно зарегистрировать в браузере свои функции. При этом, необходимо указать не только само событие, с которым инструмент будет работать, но и цель. И как только в поле зрения браузера попадает указанное событие с обозначенной целью, обработчики включаются в процесс и создают условия для выполнения задачи.
Все они требуют правильной регистрации и установки, для обеспечения эффективной производительности. Даже правильно установленные обработчики ввода, иногда могут снижать скорость работы приложения. Они могут стать причиной блокировки завершения кадров, либо инициировать перерасчет макета, который совершенно ни к чему.
Используя обработчики ввода, крайне важно помнить о некоторых правилах:
- Не стоит использовать обработчики, которые имеют длительный рабочий цикл. Это может привести к блокировке прокрутки и как следствие, не эффективному пользовательскому опыту
- Стили, которые применяются в обработчиках ввода менять не стоит
- Обработчики ввода нуждаются в оптимизации. Все значения событий требуется запомнить, а изменение стилей реализовывать когда происходит обратный вызов функции requestAnimationFrame в следующий раз.
Всё это влияет на скорость загрузки и удобство в работе с сайтом. Следовательно, при когда проводится оптимизация сайта профессионалами, данный момент также должен прорабатываться. На вышеперечисленных нюансах при использовании обработчиков мы остановимся детально.
Не стоит использовать обработчики ввода, которые имеют длительный рабочий цикл
При идеальном развитии событий, если обработчик ввода не применяется, пользователь проводит любое взаимодействие со страницей, к примеру переходит касанием по тачскрину на следующую страницу, и поток компоновки просто перемещает необходимый контент и отображает его. В данном случае, основной поток JavaScript, которые отвечает за перерисовку, перерасчёт макета, стили и прочее не задействуется вовсе.
Теперь рассмотрим ситуацию, когда обработчик ввода установлен для выполнения определённой цели. Это может быть «touchend», «touchmove» или «touchstart». В таком случае работа проводится уже в несколько этапов. В первую очередь, в действие вступает обработчик, а только после завершения им своей работы, свои функции начинает выполнять компоновщик. Если обработчик вызвал функцию «preventDefault()», то прокрутка сайта останавливается. И даже в том случае, когда данная функция не вызывается, прокрутка блокируется автоматически, а компоновщику всё равно необходимо ждать своей очереди. Это может стать причиной пропуска кадров или зависания страницы.
Следовательно, если обработчики ввода установлены, то их рабочий цикл должен быть максимально коротким. Они не должны мешать компоновщику выполнить свою работу в предельно короткие сроки.
Не стоит изменять стили, которые используются в обработчиках ввода
Чтобы разобраться в данном вопросе, необходимо понимать алгоритм работы внутри страницы и какие именно действия происходят в браузере в момент, когда пользователь с ней взаимодействует. Для примера рассмотрим прокрутку или касание, так как именно эти действия производятся чаще всего. Стоит учитывать, что обработчики ввода завершают свою работу до того, как будут выполнены обратные вызовы с использованием «requestAnimationFrame».
Что происходит, если внутрь любого из данных обработчиков ввода внести визуальное изменение. При запуске обратного вызова «requestAnimationFrame», системе потребуется сначала применить изменение стиля. И если потом ещё и придётся прочитать визуальные свойства, то принудительный синхронный перерасчет макета гарантирован. А всё это занимает драгоценные миллисекунды. И с каждым действием они складываются во вполне ощутимое время.
Оптимизация обработчиков прокрутки
И в первом, и во втором случае, которые были описаны ранее, решение проблемы будет идентичным — требуется отложить визуальные изменения до тех пор, пока не будет запущен следующий обратный вызов «requestAnimationFrame». Делается это при помощи приблизительно такого кода:
function onScroll (evt) {
// Store the scroll value for laterz.
lastScrollY = window.scrollY;
// Prevent multiple rAF callbacks.
if (scheduledAnimationFrame)
return;
scheduledAnimationFrame = true;
requestAnimationFrame(readAndUpdatePage);
}
window.addEventListener(‘scroll’, onScroll);
При этом, обработчики ввода не будут перегруженными. А это позволит не совершать блокировку прокрутки или касания, как это происходит в случае использования большого кода, требующего значительных вычислений.
