Как проверить производительность CSS селектора?

Question

Как мне провести тестирование производительности различных селекторов CSS? Я читал статьи вроде this . Но я не знаю, применимо ли это к моему веб-сайту, потому что он использовал тестовую страницу с 20000 классами и 60000 элементами DOM.

Должен ли я волноваться, действительно ли производительность сильно снижается в зависимости от выбранной вами стратегии CSS?

Например, мне нравится это делать ...

.navbar { background:gray; }
.navbar > li { display:inline;background:#ffffff; }

<ul class="navbar">
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
</ul>

... но я мог бы сделать это ...

.navbar { background:gray; }
.navbar-item { display:inline;background:#ffffff; }
<ul class="navbar">
  <li class="navbar-item">Menu 1</li>
  <li class="navbar-item">Menu 2</li>
  <li class="navbar-item">Menu 3</li>
</ul>

Кто-то скажет (и может быть прав), что второй вариант будет быстрее.

Но если вы умножите второй метод на все страницы, я увижу следующие недостатки:

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

Мои страницы кажутся размером ~ 8 КБ с ~ 1000 элементами DOM.

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

Помощь и только простые мнения приветствуются!

Answer 1

Проверьте расширение Page Speed ​​ для Firefox. Как только вы запустите его для страницы, в разделе «Использовать эффективные селекторы CSS» он даст вам список нарушающих селекторов CSS вместе с краткими пояснениями.

Также есть еще одно расширение для Chrome - Speed ​​Tracer . Помимо прочего, он дает представление о времени, затрачиваемом на пересчет стилей CSS и подбор селекторов. Это может быть просто то, что вы ищете.

Answer 2

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

Answer 3

У меня нет прямого ответа на ваш вопрос о том, как создать программу тестирования скорости страницы. Тем не менее, я предложу вам некоторые рекомендации, которые помогут вам двигаться в правильном направлении.

Размер страницы увеличится, потому что все элементы, имеющие классы

Размер добавления многочисленных классов очень незначителен по двум причинам:
1) Дополнительный размер в вашей таблице стилей будет кэширован (при условии, что вы используете внешние элементы, что вам и нужно).
2) HTML-разметка от добавления многочисленных классов в DOM составляет максимум 1 КБ. Если это больше, чем вам нужно, чтобы лучше использовать наследование.

Количество классов CSS может быть вполне большой, который потребует больше CSS Разбор класса

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

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

Answer 4

действительно нет необходимости делать Меню 1

вы можете иметь класс CSS CSS navbar li

помните также, что внешние файлы CSS могут быть уменьшены и кэшированы, тогда как HTML,Производительность также относительный термин: они часто посещают?Сеть медленная?они государственные служащие с древними компьютерами под управлением IE6?