Устранение распространенных проблем с производительностью
Пользователи ожидают интерактивных и плавных страниц. Каждый этап в конвейере пикселей представляет возможность внедрения jank (прерываний отрисовки). Узнайте о средствах и стратегиях для выявления и устранения распространенных проблем, которые замедляют производительность среды выполнения.
Сводка
Не записывайте JavaScript, который заставляет браузер пересчитывать макет. Разделяйте функции чтения и записи и выполняйте операции чтения в первую очередь.
Не усложняйте CSS. Используйте меньше CSS и упрощайте селекторы CSS.
Избегайте макета как можно больше. Выберите CSS, который вообще не активирует макет.
Рисование может занять больше времени, чем любое другое действие отрисовки. Следите за узкими местами краски.
JavaScript
Вычисления JavaScript, особенно те, которые активируют значительные визуальные изменения, могут привести к зависаю производительности приложения. Не позволяйте неправильному или длительному выполнению JavaScript мешать взаимодействию с пользователем.
JavaScript: инструменты
Сделайте запись в средстве производительности и найдите подозрительно длинные Evaluate Script события.
Если вы заметили довольно много jank (прерываний отрисовки) в JavaScript, вам может потребоваться перевести анализ на следующий уровень и собрать профиль ЦП JavaScript. Профили ЦП показывают, где используется среда выполнения в функциях страницы. Узнайте, как создавать профили ЦП в статье Ускорение выполнения JavaScript.
JavaScript: проблемы
В следующей таблице описаны некоторые распространенные проблемы JavaScript и возможные решения.
| Проблема | Пример | Решение |
|---|---|---|
| Дорогостоящие обработчики входных данных, влияющие на отклик или анимацию. | Касание, параллакс прокрутки. | Разрешите браузеру обрабатывать касания и прокрутки или привязывать прослушиватель как можно позже. См . раздел Дорогостоящие обработчики входных данных в контрольном списке производительности среды выполнения Пола Льюиса. |
| Неправильное время JavaScript влияет на отклик, анимацию, загрузку. | Пользователь прокручивает сразу после загрузки страницы setTimeout/ setInterval. | Оптимизация среды выполнения JavaScript: используйте requestAnimationFrame, распределите манипуляции DOM по кадрам, используйте веб-рабочие роли. |
| Долго выполняющийся Код JavaScript, влияющий на отклик. | Событие DOMContentLoaded останавливается, так как оно завалена работой JS. | Перемещение чистой вычислительной работы в веб-рабочие роли. Если вам нужен доступ к модели DOM, используйте .requestAnimationFrame |
| Скрипты мусора, влияющие на отклик или анимацию. | Сборка мусора может происходить в любом месте. | Напишите меньше сценариев мусора. См . раздел Сборка мусора в анимации в контрольном списке производительности среды выполнения Пола Льюиса. |
Стиль
Изменение стиля является дорогостоящим, особенно если эти изменения влияют на несколько элементов в модели DOM. Каждый раз, когда вы применяете стили к элементу, браузер определяет влияние на все связанные элементы, пересчитывает макет и перерисовывает.
Стиль: Инструменты
Сделайте запись в средстве производительности . Проверьте запись на наличие крупных Recalculate Style событий (отображается фиолетовым цветом).
Выберите событие, Recalculate Style чтобы просмотреть дополнительные сведения о нем в области Сведения . Если изменение стиля занимает много времени, это снижение производительности. Если вычисления стилей влияют на большое количество элементов, то это еще одна область с пространством для улучшения.
Чтобы уменьшить влияние Recalculate Style событий, сведите к минимуму использование свойств CSS, которые активируют макет, рисование и составные. Эти свойства оказывают наибольшее влияние на производительность отрисовки. Дополнительные сведения см. в разделах Настройка свойств Compositor-Only и Управление количеством слоев.
Стиль: проблемы
В следующей таблице описаны некоторые распространенные проблемы стиля и возможные решения.
| Проблема | Пример | Решение |
|---|---|---|
| Дорогостоящие вычисления стилей, влияющие на отклик или анимацию. | Любое свойство CSS, изменяющее геометрию элемента, например ширину, высоту или положение; браузер проверяет все остальные элементы и пересчитывает макет. | Избегайте CSS, активировав макеты |
| Сложные селекторы, влияющие на отклик или анимацию. | Вложенные селекторы заставляют браузер знать все о всех остальных элементах, включая родителей и детей. | Ссылка на элемент в CSS с помощью только класса. |
Макет
Макет (или повторное преобразование в Firefox) — это процесс, с помощью которого браузер вычисляет позиции и размеры всех элементов на странице. Модель макета веб-сайта означает, что один элемент может повлиять на другие; Например, ширина <body> элемента обычно влияет на ширину всех дочерних элементов и т. д. на всем пути вверх и вниз по дереву. Этот процесс может быть весьма замешан в браузере.
Как правило, если вы запрашиваете геометрическое значение обратно из DOM до завершения кадра, вы будете находиться с "принудительными синхронными макетами", которые могут быть большим узким местом производительности при частом повторе или выполнении для большого дерева DOM.
Макет: инструменты
Панель Производительность определяет, когда страница вызывает принудительные синхронные макеты. Эти Layout события помечаются красными полосами.
"Трэширование макета" — это повторение принудительных синхронных условий макета. Это происходит, когда JavaScript многократно записывает и считывает данные из модели DOM, что заставляет браузер повторно вычислять макет. Чтобы определить смеширование макета, найдите шаблон нескольких принудительных синхронных предупреждений макета. См. предыдущий рисунок.
Макет: проблемы
В следующей таблице описаны некоторые распространенные проблемы макета и возможные решения.
| Проблема | Пример | Решение |
|---|---|---|
| Принудительный синхронный макет, влияющий на отклик или анимацию. | Принудительное выполнение макета браузером раньше в конвейере пикселей, что приводит к повторяющимся шагам в процессе отрисовки. | Сначала выполняется пакетное чтение стиля, а затем все записи. |
| Изменения макета, влияющие на отклик или анимацию. | Цикл, который помещает браузер в цикл чтения, записи, чтения и записи, заставляя браузер повторно вычислять макет снова и снова. | Автоматическая пакетная обработка операций чтения и записи с помощью библиотеки FastDom. |
Краска и композитная
Paint — это процесс заполнения пикселей. Это часто самая затратная часть процесса отрисовки. Если вы заметили, что ваша страница не работает должным образом, скорее всего, у вас есть проблемы с краской.
Композитирование — это место, где окрашенные части страницы объединяются для отображения на экране. По большей части, если вы придерживаетесь свойств только композитора и вообще избегаете краски, вы должны заметить значительное улучшение производительности, но вам нужно watch для чрезмерного количества слоев.
Краска и композитная: инструменты
Чтобы узнать, сколько времени занимает рисование или как часто выполняется рисование, выполните следующие действия:
В средствах разработки в средстве Производительность нажмите кнопку Параметры записи (
, а затем установите флажок Включить расширенное инструментирование отрисовки .Сделайте запись.
Если большая часть времени отрисовки затрачивается на рисование, у вас возникли проблемы с рисованием. Дополнительные сведения см. в статье Включение расширенной инструментирования отрисовки в справочнике пофункциям производительности.
Краска и композит: проблемы
В следующей таблице описаны некоторые распространенные проблемы с краской и составными компонентами, а также возможные решения.
| Проблема | Пример | Решение |
|---|---|---|
| Закрашивать бури, влияющие на реакцию или анимацию. | Большие области краски или дорогие краски, влияющие на реакцию или анимацию. | Избегайте рисования, продвигайте элементы, которые перемещаются в собственный слой, используйте преобразования и непрозрачность. |
| Взрывы слоев, влияющие на анимацию. | Чрезмерная производительность слишком большого количества элементов с translateZ(0) большим количеством влияет на производительность анимации. |
Повышать уровень до уровней экономно и только тогда, когда вы знаете, что он предлагает ощутимые улучшения. |
Примечание.
Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница находится здесь и авторами Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse) и Меггин Кирни (Технический писатель).
Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.