Как я могу проверить тесты производительности для разных селекторов 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>
Некоторые скажут (и могут быть правы), что второй вариант будет быстрее.
Но если вы умножаете второй метод на всех страницах, я вижу следующие недостатки:
Мои страницы кажутся ~ 8 КБ с ~ 1000 элементами DOM.
Итак, мой реальный вопрос: как создать тестовую кровать, где я могу проверить дельта производительности на основе стратегии, принятой для реалистичных размеров веб-страниц? В частности, как я знаю, сколько времени требуется для отображения страницы? JavaScript? как именно?
Помощь и просто мнения приветствуются!
Просмотрите расширение Скорость страницы для Firefox. После того, как вы запустите его для страницы, в разделе "Использовать эффективные селектор CSS" он дает вам список оскорбительных селекторов CSS и краткие пояснения.
Также есть еще одно расширение для Chrome - Speed Tracer. Помимо всего прочего, он дает представление о времени, затрачиваемом на пересчет стиля и сопоставления стиля CSS. Это может быть просто то, что вы ищете.
Из прочитанной статьи вы указали, что разница между двумя типами селекторов не стоит беспокоиться. Убедитесь, что css достаточно ясен, чтобы понять это, и только беспокоиться о скорости, после чего оказывается узким местом.
действительно нет необходимости делать Меню 1
у вас может быть класс css navbar li
Также помните, что внешние файлы css можно минимизировать и кэшировать, тогда как html не может. Производительность также относительный термин: часто ли они посещают? Сеть медленная? являются ли они государственными служащими с использованием старых компьютеров под управлением IE6?
У меня нет прямого ответа на ваш вопрос о том, как создать программу тестирования скорости страницы. Тем не менее, я предложат вам рекомендации по лучшей практике, которые помогут вам в правильном направлении.
Размер страницы увеличится, потому что все элементы, имеющие классы
Размер добавления многочисленных классов очень ничтожен по двум причинам:
1) Дополнительный размер в таблице стилей будет кэшироваться (при условии, что вы используете внешние, что вам нужно).
2) HTML-разметка из добавления многочисленных классов в DOM составляет не более 1kb. Если это больше, чем вам нужно, чтобы лучше использовать наследование.
Число классов css вполне может большой, который потребует больше css разбор классов
У вас будет больше классов CSS, да... но правила привязки к классу CSS на самом деле быстрее, чем альтернатива использования потоковых или смежных селекторов.
До тех пор, пока вы избегаете селекторов с потоком/смесями, насколько это возможно, вы используете внешние таблицы стилей, и вы используете преимущество наследования для уменьшения повторяющихся правил, вам не нужно беспокоиться о стресс-тестах CSS.