Устранение распространенных проблем с производительностью

Пользователи ожидают интерактивных и плавных страниц. Каждый этап в пиксельном конвейере представляет собой возможность внести jank (прерывания рендеринга). Узнайте о средствах и стратегиях для выявления и устранения распространенных проблем, замедляющих производительность среды выполнения.

Сводка

• Не пишите JavaScript, который заставляет браузер пересчитать макет. Разделите функции чтения и записи, и сначала выполните операции чтения.

• Не усложняйте CSS. Используйте меньше CSS и упростите селекторы CSS.

• Избегайте макета, насколько это возможно. Выберите CSS, который вообще не запускает макет.

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

JavaScript

Вычисления JavaScript, особенно те, которые вызывают значительные визуальные изменения, могут замедлить производительность приложения. Не позволяйте несвоевременному или длительному JavaScript мешать взаимодействию с пользователем.

JavaScript: инструменты

Сделайте запись в средстве "Производительность " и найдите подозрительно длинные Evaluate Script события.

Если вы заметили довольно много недочетов (прерываний рендеринга) в вашем JavaScript, вам, возможно, придется вывести свой анализ на новый уровень и собрать профиль процессора JavaScript. Профили ЦП показывают, где расходуется время выполнения функций страницы. Узнайте, как создавать профили ЦП в статье Ускорение среды выполнения JavaScript (тип профилирования "Выборка выделения")".

JavaScript: проблемы

Ниже описаны распространенные проблемы JavaScript и возможные решения.

Проблема	Пример	Решение
Ресурсоемкие обработчики ввода, влияющие на отклик или анимацию.	Сенсорный ввод, параллакс-прокрутка.	Дайте браузеру обработать касание и прокрутку или привяжите слушателя как можно позже. См. статью «Ресурсоемкие обработчики ввода » в контрольном списке производительности среды выполнения Пола Льюиса (Paul Lewis).
Несвоевременный JavaScript, влияющий на отклик, анимацию, загрузку.	Пользователь прокручивает страницу сразу после загрузки страницы, setTimeout / setInterval.	Оптимизация среды выполнения JavaScript: используйте requestAnimationFrame, распределяйте манипуляции DOM по фреймам, используйте рабочие веб-процессы; см. раздел Использование рабочих веб-процессов.
Длительный JavaScript, влияющий на отклик.	Событие DOMContentLoaded зависает, потому что оно перегружено работой JavaScript.	Перенесите чистую вычислительную работу в Web Workers; см. Использование рабочих веб-процессов. Если вам нужен доступ DOM, используйте requestAnimationFrame.
Мусорные сценарии, влияющие на отклик или анимацию.	Сбор мусора может происходить где угодно.	Пишите меньше мусорных сценариев. См. раздел "Сборка мусора в анимациях" в контрольном списке производительности среды выполнения Пола Льюиса.

Стиль

Изменения стиля обходятся дорого, особенно если эти изменения затрагивают несколько элементов DOM. Каждый раз, когда вы применяете стили к элементу, браузер определяет, как это влияет на все связанные элементы, пересчитывает макет и перерисовывает.

Стиль: Инструменты

Сделайте запись в средстве "Перформанс ". Проверьте запись для крупных Recalculate Style событий (отображается фиолетовым цветом).

Выберите событие, Recalculate Style чтобы просмотреть дополнительные сведения о нем в области сведений . Если изменения стиля занимают много времени, это удар по производительности. Если расчеты стиля затрагивают большое количество элементов, это еще одна область, которую можно улучшить.

Чтобы уменьшить влияние Recalculate Style событий, сведите к минимуму использование свойств CSS, запускающих разметку, рисование и составку. Эти свойства оказывают наибольшее влияние на производительность отрисовки. Дополнительные сведения см. в статье "Избегайте свойств, запускающих макет или рисование " в статье "Создание высокопроизводительных анимаций CSS" в web.dev.

Стиль: Проблемы

В следующей таблице описаны некоторые распространенные проблемы стиля и возможные решения.

Проблема	Пример	Решение
Дорогостоящие вычисления стиля, влияющие на отклик или анимацию.	Любое свойство CSS, изменяющее геометрию элемента, например ширину, высоту или положение; Браузер проверяет все остальные элементы и пересчитывает макет.	Избегайте CSS, запускающих макеты.
Сложные селекторы, влияющие на отклик или анимацию.	Вложенные селекторы заставляют браузер знать все обо всех остальных элементах, включая родителей и детей.	Ссылайтесь на элемент CSS только с помощью класса.

Макет

Макет ( или перекомпоновка в Firefox) — это процесс, с помощью которого браузер вычисляет положение и размеры всех элементов на странице. Макет веб-страницы означает, что один элемент может влиять на другие; Например, ширина <body> элемента обычно влияет на ширину всех дочерних элементов и так далее вверх и вниз по дереву. Этот процесс может быть довольно сложным для браузера.

Как правило, если вы запрашиваете геометрическое значение из DOM до завершения кадра, вы обнаружите, что имеете дело с «принудительной синхронной компоновкой», которая может стать большим узким местом производительности, если повторяется часто или выполняется для большого дерева DOM.

Макет: Инструменты

Панель производительности определяет, когда страница вызывает принудительную синхронную разметку. Эти Layout события отмечены красными полосами.

"Перебрасывание макета" — это повторение принудительных синхронных условий макета. Это происходит, когда JavaScript постоянно пишет и читает из DOM, что вынуждает браузер пересчитывать макет снова и снова. Чтобы определить переброску макета, найдите шаблон из нескольких предупреждений о принудительной синхронной разметке. См. предыдущий рисунок.

Макет: Проблемы

В следующей таблице описаны некоторые распространенные проблемы макета и возможные решения.

Проблема	Пример	Решение
Принудительная синхронная разметка, влияющая на отклик или анимацию.	Принудительное выполнение браузером разметки на более ранних этапах конвейера пикселей, что приводит к повторению этапов процесса отрисовки.	Сначала пакетируйте стилистические чтения, а затем пишите.
Переброска макета, влияющая на реакцию или анимацию.	Цикл, который переводит браузер в цикл чтения-записи-чтения-записи, заставляя браузер пересчитывать макет снова и снова.	Автоматическое пакетное выполнение операций чтения и записи с помощью библиотеки FastDom.

Краска и композит

Paint — это процесс заполнения пикселей. Часто это самая дорогостоящая часть процесса рендеринга. Если вы заметили, что ваша страница работает не так, как задумано, скорее всего, у вас проблемы с рисованием.

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

Paint и композит: инструменты

Чтобы узнать, сколько времени занимает рисование или как часто оно происходит:

1. В средствах разработчика в средстве "Производительность" нажмите кнопку "Параметры записи" ("), а затем установите флажок "Включить расширенное инструментирование отрисовки".

2. Сделайте запись.

Если большая часть времени рендеринга тратится на рисование, у вас проблемы с рисованием. Дополнительные сведения см. в разделе "Включение расширенных инструментов рисования в справочнике по функциям производительности".

Краска и композит: проблемы

В следующей таблице описаны некоторые распространенные проблемы с лакокрасочными материалами и композитными материалами, а также возможные способы их устранения.

Проблема	Пример	Решение
Бури красок, влияющие на реакцию или анимацию.	Большие области краски или дорогие краски, влияющие на реакцию или анимацию.	Избегайте краски, продвигайте элементы, которые перемещаются в свой слой, используйте преобразования и непрозрачность.
Взрывы слоев, влияющие на анимацию.	Чрезмерное продвижение слишком большого количества элементов сильно translateZ(0) влияет на производительность анимации.	Продвигайте до слоев умеренно и только тогда, когда вы знаете, что это дает ощутимые улучшения.

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Оригинальная страница находится здесь , ее авторами являются Кейси Баскес и Меггин Кирни.

Эта работа предоставляется по лицензии Creative Commons Attribution 4.0 International License.