Научитесь диагностировать дорогостоящие работы, препятствующие взаимодействию с пользователем.
Длинные задачи могут привести к занятости основного потока, задерживая взаимодействие с пользователем. Chrome DevTools теперь может визуализировать длинные задачи, что упрощает просмотр задач для оптимизации.
Если вы используете Lighthouse для аудита своих страниц, возможно, вы знакомы с Time to Interactive — показателем, показывающим, когда пользователи могут взаимодействовать с вашей страницей и получать ответ. Но знаете ли вы, что длинные задачи (JavaScript) могут в значительной степени способствовать плохому TTI?
Что такое длинные задачи?
Длинная задача — это код JavaScript, который монополизирует основной поток на продолжительные периоды времени, вызывая «зависание» пользовательского интерфейса.
Во время загрузки веб-страницы длинные задачи могут связать основной поток и сделать страницу не отвечающей на ввод пользователя, даже если она выглядит готовой. Щелчки и касания часто не работают, поскольку прослушиватели событий, обработчики кликов и т. д. еще не подключены.
Длинные задачи, нагружающие ЦП, возникают из-за сложной работы, которая занимает более 50 мс. Почему 50 мс? Модель RAIL предполагает обработку событий ввода пользователя за 50 мс , чтобы обеспечить видимый ответ в течение 100 мс. Если этого не сделать, связь между действием и реакцией нарушается.
Есть ли на моей странице длинные задачи, которые могут задержать интерактивность?
До сих пор вам приходилось вручную искать «длинные желтые блоки» скрипта длительностью более 50 мс в Chrome DevTools или использовать API длинных задач , чтобы выяснить, какие задачи задерживают интерактивность. Это может быть немного обременительно.
Чтобы упростить рабочий процесс аудита производительности, DevTools теперь визуализирует длинные задачи . Задачи (показаны серым цветом) имеют красные флажки, если они являются длинными задачами.
- Запишите на панели «Производительность» запись загрузки веб-страницы.
- Ищите красный флаг в главном представлении потока. Вы должны увидеть, что задачи теперь серые («Задача»).
- Наведя курсор на полосу, вы узнаете продолжительность задачи и считается ли она «длинной».
Что вызывает мои длинные задачи?
Чтобы узнать, что является причиной длительной задачи, выберите серую панель задач . В ящике ниже выберите «Снизу вверх» и «Группировать по активности» . Это позволяет вам увидеть, какие действия внесли наибольший вклад (в общей сложности) в выполнение задачи, на выполнение которой ушло так много времени. Ниже представлен дорогостоящий набор запросов DOM.
Каковы распространенные способы оптимизации длинных задач?
Большие сценарии часто являются основной причиной длинных задач, поэтому рассмотрите возможность их разделения . Также следите за сторонними скриптами; их длинные задачи могут задержать интерактивность основного контента.
Разбейте всю свою работу на небольшие фрагменты (которые выполняются < 50 мс) и запускайте эти фрагменты в нужном месте и в нужное время; нужное место может быть даже за пределами основного потока, в рабочем потоке. Книга Фила Уолтона «Idle Until Urgent» — хорошее чтение на эту тему. См. также статью «Оптимизация длинных задач» , где описаны общие стратегии управления и разделения длинных задач.
Следите за тем, чтобы ваши страницы были адаптивными. Сведение к минимуму длительных задач — отличный способ обеспечить пользователям приятные впечатления от посещения вашего сайта. Дополнительную информацию о длинных задачах см. в разделе Показатели производительности, ориентированные на пользователя .