Как я могу проверить тесты производительности для разных селекторов 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>
Некоторые скажут (и могут быть правы), что второй вариант будет быстрее.
Но если вы умножаете второй метод на всех страницах, я вижу следующие недостатки:
- Размер страницы будет увеличиваться, потому что все элементы, имеющие классы
- Число классов css может стать довольно большим, что потребует более синтаксического анализа класса css
Мои страницы кажутся ~ 8 КБ с ~ 1000 элементами DOM.
Итак, мой реальный вопрос: как создать тестовую кровать, где я могу проверить дельта производительности на основе стратегии, принятой для реалистичных размеров веб-страниц? В частности, как я знаю, сколько времени требуется для отображения страницы? JavaScript? как именно?
Помощь и просто мнения приветствуются!
