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

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

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

В записях производительности некоторые из этих длительных задач могут быть события 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, которые:

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

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

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

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

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

См. также

• Просмотрите затраты на селектор CSS на боковой панели средства производительностив разделе Новые возможности средств разработки (Microsoft Edge 131).
• Анализ производительности среды выполнения (учебник) — общие сведения об анализе производительности среды выполнения в средствах разработки.
• Справочник по функциям производительности . Охватывает многие функции в средстве производительности .
• Правда о производительности селектора CSS — запись блога Windows.