Минимизация работы основного потока
Процесс визуализации браузера — это то, что превращает ваш код в веб-страницу, с которой могут взаимодействовать ваши пользователи. По умолчанию основной поток процесса рендеринга обрабатывает большую часть кода: он анализирует HTML и строит DOM, анализирует CSS и применяет указанные стили, а также анализирует, оценивает и выполняет JavaScript.
Основной поток также обрабатывает пользовательские события. Таким образом, каждый раз, когда основной поток занят чем-то другим, веб-страница может не реагировать на действия пользователя, что приводит к плохому взаимодействию.
Почему аудит работы основного потока Lighthouse завершается неудачей #
Lighthouse отмечает страницы, которые во время загрузки загружают основной поток более 4 секунд:
Чтобы помочь вам определить источники загрузки основного потока, Lighthouse показывает, на что было потрачено время ЦП, пока браузер загружал вашу страницу.
Как минимизировать работу основного потока #
Разделы ниже организованы на основе категорий, о которых сообщает Lighthouse. См. в разделе «Анатомия фрейма» обзор того, как Chromium отображает веб-страницы.
См. раздел «Уменьшите объем работы основного потока», чтобы узнать, как использовать Chrome DevTools для подробного анализа работы основного потока при загрузке страницы.
Оценка скриптов #
Стили и верстка #
Рендеринг #
- Применение свойств только для компоновщика и управление количеством слоев
- Упрощение сложной окраски и уменьшение площади окрашивания
Анализ HTML и CSS #
Анализ и компиляция скрипта #
Сбор мусора #
Ресурсы #
- Исходный код для аудита минимизации работы основного потока
- Основной поток (MDN)
- Взгляд изнутри на современный веб-браузер (часть 3)