Процесс визуализации браузера — это то, что превращает ваш код в веб-страницу, с которой могут взаимодействовать ваши пользователи. По умолчанию основной поток процесса рендеринга обрабатывает большую часть кода: он анализирует HTML и строит DOM, анализирует CSS и применяет указанные стили, а также анализирует, оценивает и выполняет JavaScript.
Основной поток также обрабатывает пользовательские события. Таким образом, каждый раз, когда основной поток занят чем-то другим, веб-страница может не реагировать на действия пользователя, что приводит к плохому взаимодействию.
Почему аудит работы основного потока Lighthouse завершается неудачей
Lighthouse отмечает страницы, которые во время загрузки загружают основной поток более 4 секунд:
Чтобы помочь вам определить источники загрузки основного потока, Lighthouse показывает, на что было потрачено время ЦП, пока браузер загружал вашу страницу.
See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.
Как минимизировать работу основного потока
Разделы ниже организованы на основе категорий, о которых сообщает Lighthouse. См. в разделе «Анатомия фрейма» обзор того, как Chromium отображает веб-страницы.
См. раздел «Уменьшите объем работы основного потока», чтобы узнать, как использовать Chrome DevTools для подробного анализа работы основного потока при загрузке страницы.
Оценка скриптов
Стили и верстка
Рендеринг
- Применение свойств только для компоновщика и управление количеством слоев
- Упрощение сложной окраски и уменьшение площади окрашивания
Анализ HTML и CSS
Анализ и компиляция скрипта
Сбор мусора
Ресурсы
Updated on • Improve article