Skip to content
Обучение Измерение Блог Case studies О сайте
Содержание
  • Почему аудит работы основного потока Lighthouse завершается неудачей
  • Как минимизировать работу основного потока
    • Оценка скриптов
    • Стили и верстка
    • Рендеринг
    • Анализ HTML и CSS
    • Анализ и компиляция скрипта
    • Сбор мусора
  • Ресурсы

Минимизация работы основного потока

May 2, 2019 — Обновлено Oct 4, 2019
Available in: Português, English
Appears in: Аудиты производительности
Содержание
  • Почему аудит работы основного потока Lighthouse завершается неудачей
  • Как минимизировать работу основного потока
    • Оценка скриптов
    • Стили и верстка
    • Рендеринг
    • Анализ HTML и CSS
    • Анализ и компиляция скрипта
    • Сбор мусора
  • Ресурсы

Процесс визуализации браузера — это то, что превращает ваш код в веб-страницу, с которой могут взаимодействовать ваши пользователи. По умолчанию основной поток процесса рендеринга обрабатывает большую часть кода: он анализирует HTML и строит DOM, анализирует CSS и применяет указанные стили, а также анализирует, оценивает и выполняет JavaScript.

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

Почему аудит работы основного потока Lighthouse завершается неудачей #

Lighthouse отмечает страницы, которые во время загрузки загружают основной поток более 4 секунд:

Снимок экрана аудита минимизации работы основного потока Lighthouse

Чтобы помочь вам определить источники загрузки основного потока, Lighthouse показывает, на что было потрачено время ЦП, пока браузер загружал вашу страницу.

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

Как минимизировать работу основного потока #

Разделы ниже организованы на основе категорий, о которых сообщает Lighthouse. См. в разделе «Анатомия фрейма» обзор того, как Chromium отображает веб-страницы.

См. раздел «Уменьшите объем работы основного потока», чтобы узнать, как использовать Chrome DevTools для подробного анализа работы основного потока при загрузке страницы.

Оценка скриптов #

  • Оптимизация стороннего JavaScript
  • Устранение обработчиков ввода
  • Использование веб-воркеров

Стили и верстка #

  • Уменьшение объема и сложности расчетов стилей
  • Уход от больших, сложных макетов и перегрузки макетами

Рендеринг #

  • Применение свойств только для компоновщика и управление количеством слоев
  • Упрощение сложной окраски и уменьшение площади окрашивания

Анализ HTML и CSS #

  • Извлечение критического CSS
  • Минимизация CSS
  • Откладывание некритического CSS

Анализ и компиляция скрипта #

  • Уменьшение полезной нагрузки JavaScript за счет разделения кода
  • Удаление неиспользуемого кода

Сбор мусора #

  • Контроль общего использования памяти вашей веб-страницей с помощью measureMemory()

Ресурсы #

  • Исходный код для аудита минимизации работы основного потока
  • Основной поток (MDN)
  • Взгляд изнутри на современный веб-браузер (часть 3)
Последнее обновление: Oct 4, 2019 — Улучшить статью
Return to all articles
Поделиться
подписаться

Contribute

  • Сообщить об ошибке
  • Просмотреть исходный код

Дополнительная информация

  • developer.chrome.com
  • Новости Chrome
  • Web Fundamentals
  • Разборы конкретных случаев
  • Подкасты
  • Шоу

Соцсети

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Все продукты
  • Условия и конфиденциальность
  • Правила сообщества

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.