Как мне провести тесты производительности различных селекторов CSS? Я читал статьи какэтот, Но я не знаю, применимо ли это к моему веб-сайту, потому что он использовал тестовую страницу с 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? как именно?

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