Бөлісу құралы:

Анализ производительности селектора CSS во время событий recalculate Style

  • Мақала

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

Средство "Производительность" выделяет каждую долго выполняющуюся задачу красным треугольником в правом верхнем углу, чтобы указать, что работа над потоком main, выполнение которого занимает много времени и имеет низкую производительность:

Индикаторы длительных задач для событий в потоке main с низкой производительностью

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

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

Стили CSS необходимо пересчитывать каждый раз, когда применимость правил CSS может измениться, например:

  • При добавлении элементов в DOM или удалении из него.
  • При изменении атрибутов элемента, например значения атрибута class или id .
  • При вводе пользователем, например при перемещении мыши или изменении элемента веб-страницы, который может повлиять на :hover правила.

Запись трассировки производительности с включенной статистикой выбора

Чтобы просмотреть статистику селекторов правил CSS во время длительных событий Recalculate Style , сначала запишите трассировку производительности с включенной функцией Селектора статистики. Чтобы включить функцию Селектор статистики, установите флажок Включить статистику селектора CSS , на котором отображается вкладка Селектор статистики .

Функция селектора статистики не всегда включена, так как она увеличивает нагрузку на записи производительности. Его следует оставить включенным только в том случае, если необходимо изучить производительность событий recalculate Style и других сведений о отрисовке.

Чтобы записать трассировку производительности с помощью статистики селектора, выполните приведенные далее действия.

  1. Откройте веб-страницу в новом окне или на вкладке, например на демонстрационной странице Фотоальбом .

  2. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

  3. В средствах разработки на панели действий выберите вкладку Производительность (значок средства производительности). Если эта вкладка не отображается, выберите Дополнительные инструменты (значок дополнительных инструментов) >Производительность.

  4. В средстве Производительность нажмите кнопку Параметры записи (значок параметров записи).

  5. Установите флажок Включить статистику селектора CSS :

    Флажок

  6. Нажмите кнопку Запись (значок записи) и запустите сценарий, который вы хотите улучшить для веб-сайта или приложения.

  7. Нажмите кнопку Остановить .

Затем просмотрите статистику селектора CSS, как описано в разделах ниже.

Просмотр статистики селектора правил CSS для одного события

Чтобы просмотреть статистику селекторов правил CSS, участвующих в одном событии Recalculate Style , выполните следующие действия:

  1. Выполните действия, описанные выше в разделе Запись трассировки производительности с включенной статистикой выбора.

  2. Найдите событие Recalculate Style в записи производительности и щелкните его.

  3. В нижней части средства "Производительность " щелкните вкладку Статистика выбора :

    Вкладка

Таблица селекторов CSS на вкладке Статистика селектора

Вкладка Статистика выбора в средстве Производительность содержит таблицу селекторов CSS. В таблице отображаются следующие сведения для каждого селектора CSS:

Столбец Описание
Затрачено (мс) Время, затраченное браузером на соответствие этому селектору CSS. Это время задается в миллисекундах (мс), где 1 мс составляет 1/1000 секунды.
Попытки сопоставления Количество элементов, которые подсистема браузера пыталась сопоставить с этим селектором CSS.
Количество совпадений Количество элементов подсистемы браузера, сопоставленных с этим селектором CSS.
Процент совпадений с медленным путем Отношение элементов, которые не совпадали с этим селектором CSS, к элементам, которые подсистема браузера пыталась сопоставить, и которые требовали, чтобы обработчик браузера использовал менее оптимизированный код для сопоставления.
Селектор Соответствующий селектор CSS.
Таблица стилей Таблица стилей CSS, содержащая селектор CSS.

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

Просмотр статистики селектора правил CSS для нескольких событий

Чтобы просмотреть статистическую статистику селекторов правил CSS, участвующих в нескольких событиях recalculate Style , скопируйте несколько таблиц Селектора Статистики в электронную таблицу следующим образом:

  1. Выполните действия, описанные выше в разделе Запись трассировки производительности с включенной статистикой выбора.

  2. Найдите первое интересующее вас событие Recalculate Style и щелкните его.

  3. В нижней части средства Производительность щелкните вкладку Статистика селектора .

  4. Щелкните правой кнопкой мыши таблицу статистики селектора и выберите Копировать таблицу:

    Пункт меню

  5. Вставьте таблицу в электронную таблицу, например Microsoft Excel.

  6. Повторите предыдущие шаги с другими интересующими вас событиями Recalculate Style .

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

Просмотр статистической статистики селектора правил CSS для полной записи

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

  1. Выполните действия, описанные выше в разделе Запись трассировки производительности с включенной статистикой выбора.

  2. Отмените выбор любого события, выбранного в записи производительности, щелкнув пустую область диаграммы пламени.

  3. Выберите весь диапазон записи. Для этого дважды щелкните диаграмму ЦП в верхней части средства Производительность или наведите указатель мыши на диаграмму пламени и прокрутите вверх, пока не отобразится вся диаграмма.

  4. В нижней части средства "Производительность " щелкните вкладку Статистика выбора :

    Таблица селектора статистики для полной записи

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

Анализ статистики селектора CSS

Чтобы отсортировать данные, отображаемые в таблице Selector Stats в порядке возрастания или убывания, щелкните заголовок столбца. Например, чтобы узнать, какие селекторы CSS занимают больше всего времени, щелкните заголовок столбца Прошло (мс):

Таблица Селектора статистики с селекторами CSS, отсортированных по затраченным времени в порядке убывания

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

  • потребовалось много времени для вычисления (высокое значение затраченного (мс) ),
  • и которые браузер пытался сопоставить много раз (высокое значение попыток совпадения ),
  • и которые браузер фактически не сопоставляет многие элементы с (низкое значение match count по сравнению со значением Match Attempts );
  • и с высоким процентом несововствий с медленным путем.

Например, на снимке экрана выше:

  • Первый селектор CSS (.gallery .photo .meta ::selection) требовал больше всего времени.
  • Подсистема браузера пыталась сопоставить этот селектор CSS 6017 раз, но только 3234 элемента.
  • Из 2783 элементов, которые не совпадают, 78% из них требуют менее оптимизированного кода для сопоставления.

Таким образом, этот селектор CSS является хорошим кандидатом, чтобы попытаться улучшить.

Попробуйте изменить селекторы CSS, чтобы они требовали меньше времени на вычисление и соответствовали меньшему количеству элементов на странице. Улучшение селекторов CSS зависит от конкретного варианта использования. Повторите шаги, описанные в разделах "Запись" и "Просмотр", чтобы убедиться, что изменения помогли уменьшить длительность события Recalculate Style в столбце "Затрачено" (мс).

См. также