Длительная задача — это код JavaScript, который монополизирует основной поток в течение длительного периода времени, вызывая «зависание» пользовательского интерфейса.
Пока страница загружается, длинные задачи могут заблокировать основной поток и сделать страницу неотзывчивой на ввод пользователя, даже если она выглядит готовой. Щелчки и нажатия часто не работают, поскольку интерактивные функции, такие как прослушиватели событий и обработчики щелчков, еще не прикреплены к элементам пользовательского интерфейса. Из-за этого длинные задачи могут значительно увеличить время до интерактивности .
Chrome DevTools теперь может визуализировать длинные задачи , что упрощает обнаружение задач, требующих оптимизации.
Что считается длительной задачей?
Длительные задачи, требующие много ресурсов ЦП, вызваны сложной работой, которая занимает более 50 мс. Модель RAIL предполагает, что вы обрабатываете события пользовательского ввода за 50 мс, чтобы обеспечить видимый ответ в течение 100 мс и сохранить связь между действием и реакцией.
Ключевой момент: в то время как модель RAIL предполагает предоставление визуального ответа на пользовательский ввод в течение 100 мс, пороговые значения метрики «Взаимодействие до следующей отрисовки» (INP) допускают значение до 200 мс, что позволяет устанавливать более достижимые ожидания, особенно для более медленных устройств.
Есть ли на моей странице длительные задачи, которые могут задержать интерактивность?
До сих пор вам приходилось вручную искать «длинные желтые блоки» скрипта длительностью более 50 мс в Chrome DevTools или использовать API длинных задач, чтобы выяснить, какие задачи задерживали интерактивность.
Чтобы облегчить вам рабочий процесс аудита производительности, DevTools теперь визуализирует длительные задачи . Задачи (отображаются серым цветом) имеют красные флажки, если они длительные.
Чтобы использовать новый инструмент визуализации:
- Запишите трассировку на панели «Производительность» загрузки веб-страницы.
- Посмотрите на красный флаг в главном представлении потока. Вы должны увидеть, что задачи теперь отмечены серым цветом и помечены как Task .
- Наведите указатель на серую полосу. Вы увидите диалоговое окно, в котором будет указана длительность задачи и будет ли она считаться длительной задачей.
Что является причиной моих длительных задач?
Чтобы узнать причину долгой задачи, выберите серую панель задач . В нижней части выберите Bottom-Up и Group by Activity . Это позволит вам увидеть, какие действия внесли наибольший вклад (в общей сложности) в то, что задача так долго выполнялась. В следующем примере причина задержки выглядит как дорогостоящий набор запросов DOM.
Каковы распространенные способы оптимизации длительных задач?
Большие скрипты часто являются основной причиной длинных задач. Рассмотрите возможность их разделения . Также следите за сторонними скриптами, которые также могут содержать длинные задачи, задерживающие переход основного контента в интерактивное состояние.
Разбейте всю работу на части, которые выполняются за < 50 мс, и запускайте эти части в нужном месте и в нужное время. Для некоторых из них подходящим местом может быть вне основного потока, в service worker. Для получения рекомендаций по разбиению длительных задач см. Optimize Long Tasks и Idle Until Urgent Фила Уолтона.
Поддерживайте адаптивность страниц. Минимизация длительных задач — отличный способ обеспечить пользователям приятные впечатления при посещении вашего сайта. Для получения дополнительной информации о длительных задачах см. User-centric Performance Metrics .
,
Длительная задача — это код JavaScript, который монополизирует основной поток в течение длительного периода времени, вызывая «зависание» пользовательского интерфейса.
Пока страница загружается, длинные задачи могут заблокировать основной поток и сделать страницу неотзывчивой на ввод пользователя, даже если она выглядит готовой. Щелчки и нажатия часто не работают, поскольку интерактивные функции, такие как прослушиватели событий и обработчики щелчков, еще не прикреплены к элементам пользовательского интерфейса. Из-за этого длинные задачи могут значительно увеличить время до интерактивности .
Chrome DevTools теперь может визуализировать длинные задачи , что упрощает обнаружение задач, требующих оптимизации.
Что считается длительной задачей?
Длительные задачи, требующие много ресурсов ЦП, вызваны сложной работой, которая занимает более 50 мс. Модель RAIL предполагает, что вы обрабатываете события пользовательского ввода за 50 мс, чтобы обеспечить видимый ответ в течение 100 мс и сохранить связь между действием и реакцией.
Ключевой момент: в то время как модель RAIL предполагает предоставление визуального ответа на пользовательский ввод в течение 100 мс, пороговые значения метрики «Взаимодействие до следующей отрисовки» (INP) допускают значение до 200 мс, что позволяет устанавливать более достижимые ожидания, особенно для более медленных устройств.
Есть ли на моей странице длительные задачи, которые могут задержать интерактивность?
До сих пор вам приходилось вручную искать «длинные желтые блоки» скрипта длительностью более 50 мс в Chrome DevTools или использовать API длинных задач, чтобы выяснить, какие задачи задерживали интерактивность.
Чтобы облегчить вам рабочий процесс аудита производительности, DevTools теперь визуализирует длительные задачи . Задачи (отображаются серым цветом) имеют красные флажки, если они длительные.
Чтобы использовать новый инструмент визуализации:
- Запишите трассировку на панели «Производительность» загрузки веб-страницы.
- Посмотрите на красный флаг в главном представлении потока. Вы должны увидеть, что задачи теперь отмечены серым цветом и помечены как Task .
- Наведите указатель на серую полосу. Вы увидите диалоговое окно, в котором будет указана длительность задачи и будет ли она считаться длительной задачей.
Что является причиной моих длительных задач?
Чтобы узнать причину долгой задачи, выберите серую панель задач . В нижней части выберите Bottom-Up и Group by Activity . Это позволит вам увидеть, какие действия внесли наибольший вклад (в общей сложности) в то, что задача так долго выполнялась. В следующем примере причина задержки выглядит как дорогостоящий набор запросов DOM.
Каковы распространенные способы оптимизации длительных задач?
Большие скрипты часто являются основной причиной длинных задач. Рассмотрите возможность их разделения . Также следите за сторонними скриптами, которые также могут содержать длинные задачи, задерживающие переход основного контента в интерактивное состояние.
Разбейте всю работу на части, которые выполняются за < 50 мс, и запускайте эти части в нужном месте и в нужное время. Для некоторых из них подходящим местом может быть вне основного потока, в service worker. Для получения рекомендаций по разбиению длительных задач см. Optimize Long Tasks и Idle Until Urgent Фила Уолтона.
Поддерживайте адаптивность страниц. Минимизация длительных задач — отличный способ обеспечить пользователям приятные впечатления при посещении вашего сайта. Для получения дополнительной информации о длительных задачах см. User-centric Performance Metrics .