Боже, предоставьте Патрику Броссе возможность рассказать о производительности CSS максимально доступным и практичным способом. Не то чтобы CSS всегда был тем, что увеличивает скорость, или даже самым дешевым фруктом, когда дело доходит до повышения производительности.
Но если вы ищете преимущества на стороне CSS, у Патрика есть отличный способ определить ваши самые дорогие селекторы с помощью Edge DevTools:
- Взломайте DevTools.
- Перейдите на вкладку «Производительность».
- Убедитесь, что у вас включена опция «Включить расширенный инструментарий рендеринга». Это сбивало меня с толку в процессе.
- Запишите загрузку страницы.
- Откройте вкладку «Снизу вверх» в отчете.
- Проверьте размер пересчитанных стилей.
Отсюда щелкните одно из событий Recalculated Style в главном представлении водопада, и вы получите новую вкладку «Статистика селектора». Посмотрите на все это добро!
Теперь вы видите все селекторы, которые были обработаны, и их можно отсортировать по тому, сколько времени они заняли, сколько раз они совпадали, количеству попыток сопоставления и так называемому «счетчику быстрых отклонений», который, как я узнал, представляет собой количество элементов, которые были легко и быстро исключены из сопоставления.
Здесь много идей, если CSS действительно является узким местом, которое необходимо исследовать. Но прочитайте полный пост Патрика в блоге Microsoft Edge, потому что он гораздо глубже анализирует, почему и как, и проходит через весь пример.
Перевод статьи "The truth about CSS selector performance".
