Wie würde ich die Performance-Benchmarks verschiedener CSS-Selektoren testen? Ich habe Artikel wie @ gelesDie. Ich weiß aber nicht, ob es auf meine Website zutrifft, da er eine Testseite mit 20000 Klassen und 60000 DOM-Elementen verwendet hat.

Sollte es mich auch interessieren, wird die Leistung wirklich so stark herabgestuft, basierend auf der von Ihnen gewählten CSS-Strategie?

Zum Beispiel mache ich das gerne ...

.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>

... aber ich könnte das machen ...

.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>

Einige würden sagen (und könnten recht haben), dass die zweite Option schneller wäre.

Aber wenn Sie die zweite Methode über alle Seiten multiplizieren, sehe ich die folgenden Nachteile:

Die Seitengröße nimmt zu, da alle Elemente mit KlassenAnzahl der CSS-Klassen kann ziemlich groß werden, was mehr Analyse der CSS-Klassen erfordern würde

Meine Seiten scheinen ~ 8 KB mit ~ 1000 DOM-Elementen zu sein.

So ist meine eigentliche Frage, wie ich eine Testumgebung erstelle, in der ich Leistungsdeltas basierend auf der Strategie für realistische Webseitengrößen testen kann? Woher weiß ich, wie lange es dauert, bis eine Seite angezeigt wird? Javascript? wie genau

Hilfe und einfache Meinungen sind willkommen!