Wie test-CSS-Selektor-Leistung?

Wie würde ich mich zum testen der performance-benchmarks von verschiedenen css-Selektoren? Ich habe gelesen, Artikel wie diese. Aber ich weiß nicht, ob es anwendbar ist auf meiner website, weil er eine test-Seite mit 20000 Klassen und 60000 DOM-Elemente.

Sollte ich mich auch kümmern,tut der Leistung wirklich herabgestuft, die viel auf der Grundlage der css-Strategie, die Sie nehmen?

Fo Beispiel, wie ich das zu tun ...

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

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

Manche würden sagen (und zwar richtig), dass die zweite option wäre schneller.

Aber wenn Sie multiplizieren die zweite Methode auf allen Seiten sehe ich folgende Nachteile:

1. Die Seite, die Größe zu erhöhen, da alle Elemente mit den Klassen
2. Anzahl der css-Klassen Recht groß, die erfordern weitere css-Klasse Parsen

Meine Seiten scheinen auf ~ 8 KB mit ~1000 DOM-Elemente.

Also meine eigentliche Frage ist, wie erstelle ich ein test-Bett, wo ich testen könnte performance-deltas basierend auf der Strategie ergriffen, um realistische web-Seite Größen? Wie genau weiß ich, wie lange es dauert, bis eine Seite angezeigt werden? javascript? wie genau?

Helfen und einfach nur Meinungen sind willkommen!