Выполнение задач JavaScript зачастую является источником самых распространенных проблем в производительности сайта. Избегание появления так называемых длительных задач (long tasks) и блокировки основного потока JavaScript (JS) — одна из наиболее важных стратегий по повышению быстродействия. В данной статье мы рассмотрим, как длительные задачи могут сказываться на производительности сайта, а также расскажем о мерах, которые можно предпринять для их устранения.

Содержание

Что такое длительная JavaScript задача?

Браузер производит операции по отображению страницы в едином потоке,  поэтому важно, чтобы время выполнения задач в JS составляло не более 50 мс. Если данный показатель превышается, это явление называют длительной задачей. Когда оно возникает, пользователь начинает замечать повышенную нагрузку браузера. Клики по элементам страницы в таком случае задерживаются, прокрутка становится дерганой, или страница не отвечает вообще. 

Также помимо кода сайта (выполнение JS), на формирование длительных задач могут влиять скорость сети и мощность процессора. К примеру, если длительные задачи из-за малой мощности процессора заблокируют основной поток браузера, тот не сможет получить возможности своевременно обработать пользовательские данные. Отсюда снова возникнет задержка в ожидании ответа от страницы.

Стоит упомянуть, что длительные задачи могут порождаться изменением style элемента через JS. Например, когда меняется высота блока, заставляющая пересчитать координаты на странице: recalculate style => reflow, repaint.

Чем длительные JavaScript задачи вредны для показателей Core Web Vitals?

Наиболее всего влиянию длительных задач подвержен показатель FID (First Input Delay или время ожидания до первого взаимодействия с контентом). Поскольку основной поток браузера неравномерно занят на протяжении всего жизненного цикла страницы, данный показатель может сильно различаться в зависимости от того, когда именно пользователь впервые взаимодействует с ней. В результате этого одни пользователи могут не испытывать задержки вообще, в то время как другие сразу сталкиваются с проявлениями перегрузки, о которых мы уже рассказывали. Именно поэтому важно понимать, как искать длительные задачи и оптимизировать код, чтобы улучшить показатель FID вашего сайта. 

FID напрямую зависит от поведения реальных пользователей и, как упоминалось выше, оно уникально для каждого из них. Ключевую роль играет отслеживание поведения, которое можно осуществлять с помощью инструмента Core Web Vitals Monitoring, чтобы проводить оптимизацию, исходя из реальных данных. 

Как находить и измерять длительные JavaScript задачи? 

В этом нам помогут следующие сервисы:

Chrome DevTools

На  панели «Производительность» (Performance) запишите трассировку для загрузки веб-страницы.

Поищите красные флажки в области основного потока. Задачи показаны серым и помечены как «Задача» (Task).

Наведите указатель мыши на полосу, чтобы увидеть, сколько выполнялась задача, и считается ли она «длительной».

Чтобы узнать источник длительной задачи, выберите серую полоску Задача (Task). В выдвигающейся панели внизу выберите Снизу вверх (Bottom-Up) и вариант Группировка по действию (Group by Activity). Вы увидите, какие действия внесли наибольший вклад во время выполнения задачи. 

​​

Webpagetest.org

На графике с помощью красных блоков показана блокировка основного потока на 50 мс. Данное событие также блокирует входные данные, например нажатия кнопок пользователем. Зеленый цвет означает, что поток не заблокирован.

Long Tasks API

Мы можем измерить длинные задачи в любом приложении, подписавшись на интерфейс PerformanceObserver с помощью данного кода:

var observer = new PerformanceObserver(function(list) {

    var perfEntries = list.getEntries();

    for (var i = 0; i < perfEntries.length; i++) {

        // Process long task notifications:

        // report back for analytics and monitoring

        // …

    }

});

// register observer for long task notifications

observer.observe({entryTypes: [«longtask»]});

// Long script execution after this will result in queueing

// and receiving «longtask» entries in the observer.

Общие рекомендации по устранению длительных JavaScript задач

  • Выполняйте код в Web Workers в отдельном потоке, позволяя основному потоку сосредоточиться на других важных задачах, таких как синтаксический анализ HTML, подготовка дерева рендеринга, рендеринг пикселей, реагирование на пользовательский ввод и т. д.
  • Разбейте код JavaScript, помеченный как «длительные задачи», на более мелкие задачи с помощью функций “setTimeout/requestidlecallback/requestAnimationFrame”. Это заставит основной поток работать максимально эффективно и выполнять все операции без каких-либо недопустимых задержек.
  • Освободите загруженность сети при загрузке страницы (делайте как можно меньше сетевых запросов и загружайте их как можно позже, желательно после события FID).
  • Отложите неиспользуемый JavaScript, для этого используйте async или defer.

Как мы решили проблему длительных JavaScript задач в Prism

В Clickio Prism используются передовые технологии для создания быстро загружаемой версии веб-сайта, оптимизированной для мобильных устройств. При разработке Prism было важно обеспечить быструю загрузку страниц без какого-либо негативного влияния на пользовательский опыт, поэтому для устранения длительных задач мы предприняли следующие действия:

  • Разделили длительные задачи на более мелкие при помощи функци requestidlecallback/requestAnimationFrame.
  • Получили большие данные через Web Workers. Особенно те, которые не участвуют во взаимодействии с DOM.
  • Создали очередь подгрузки скриптов виджетов.
  • Уменьшили загруженность CPU процессами, выполняющимися при загрузке страницы (уменьшение количества запросов и передаваемых данных при первом рендере страницы).
  • Загрузили некоторые сторонние трекеры через библиотеку partytown.js.

Совокупность этих настроек, наряду с интеллектуальной отложенной загрузкой и использованием CDN, позволяет Prism существенно влиять на удобство работы пользователей и производительность сайта. Фактически, на сайтах, использующих Prism, в среднем посетители проводят на 45% больше времени, а доход за тысячу сеансов (RPM) увеличивается на 59%.

Кликните здесь, чтобы узнать больше о Prism и попробовать в действии бесплатную версию.