Длинные задачи JavaScript задерживают ваше время взаимодействия?

Научитесь диагностировать дорогостоящие работы, препятствующие взаимодействию с пользователем.

Адди Османи
Адди Османи

Длинные задачи могут привести к занятости основного потока, задерживая взаимодействие с пользователем. Chrome DevTools теперь может визуализировать длинные задачи, что упрощает просмотр задач для оптимизации.

Если вы используете Lighthouse для аудита своих страниц, возможно, вы знакомы с Time to Interactive — показателем, показывающим, когда пользователи могут взаимодействовать с вашей страницей и получать ответ. Но знаете ли вы, что длинные задачи (JavaScript) могут в значительной степени способствовать плохому TTI?

Время до интерактивного взаимодействия отображается в отчете Lighthouse

Что такое длинные задачи?

Длинная задача — это код JavaScript, который монополизирует основной поток на продолжительные периоды времени, вызывая «зависание» пользовательского интерфейса.

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

Длинные задачи, нагружающие ЦП, возникают из-за сложной работы, которая занимает более 50 мс. Почему 50 мс? Модель RAIL предполагает обработку событий ввода пользователя за 50 мс , чтобы обеспечить видимый ответ в течение 100 мс. Если этого не сделать, связь между действием и реакцией нарушается.

Есть ли на моей странице длинные задачи, которые могут задержать интерактивность?

До сих пор вам приходилось вручную искать «длинные желтые блоки» скрипта длительностью более 50 мс в Chrome DevTools или использовать API длинных задач , чтобы выяснить, какие задачи задерживают интерактивность. Это может быть немного обременительно.

Снимок экрана панели DevTools Performance, показывающий разницу между короткими и длинными задачами.

Чтобы упростить рабочий процесс аудита производительности, DevTools теперь визуализирует длинные задачи . Задачи (показаны серым цветом) имеют красные флажки, если они являются длинными задачами.

DevTools визуализирует длинные задачи в виде серых полос на панели производительности с красным флажком для длинных задач.

  • Запишите на панели «Производительность» запись загрузки веб-страницы.
  • Ищите красный флаг в главном представлении потока. Вы должны увидеть, что задачи теперь серые («Задача»).
  • Наведя курсор на полосу, вы узнаете продолжительность задачи и считается ли она «длинной».

Что вызывает мои длинные задачи?

Чтобы узнать, что является причиной длительной задачи, выберите серую панель задач . В ящике ниже выберите «Снизу вверх» и «Группировать по активности» . Это позволяет вам увидеть, какие действия внесли наибольший вклад (в общей сложности) в выполнение задачи, на выполнение которой ушло так много времени. Ниже представлен дорогостоящий набор запросов DOM.

Выбор длинной задачи (с пометкой «Задача») в DevTools позволяет нам детализировать действия, которые за нее отвечают.

Каковы распространенные способы оптимизации длинных задач?

Большие сценарии часто являются основной причиной длинных задач, поэтому рассмотрите возможность их разделения . Также следите за сторонними скриптами; их длинные задачи могут задержать интерактивность основного контента.

Разбейте всю свою работу на небольшие фрагменты (которые выполняются < 50 мс) и запускайте эти фрагменты в нужном месте и в нужное время; нужное место может быть даже за пределами основного потока, в рабочем потоке. Книга Фила Уолтона «Idle Until Urgent» — хорошее чтение на эту тему. См. также статью «Оптимизация длинных задач» , где описаны общие стратегии управления и разделения длинных задач.

Следите за тем, чтобы ваши страницы были адаптивными. Сведение к минимуму длительных задач — отличный способ обеспечить пользователям приятные впечатления от посещения вашего сайта. Дополнительную информацию о длинных задачах см. в разделе Показатели производительности, ориентированные на пользователя .