Databases
StackOverflow2013
Postsdbo
POHow to test CSS selector performance?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to test CSS selector performance?
    text
    copied!<p>How would I go about testing the performance benchmarks of different css selectors? I've read articles like <a href="http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/" rel="noreferrer">this</a>. But I don't know if it is applicable to my website because he used a test page with 20000 classes and 60000 DOM elements.</p> <p>Should I even care,does performance really get downgraded that much based upon the css strategy you take?</p> <p>Fo example, I like doing this ...</p> <pre><code>.navbar { background:gray; } .navbar &gt; li { display:inline;background:#ffffff; } &lt;ul class="navbar"&gt; &lt;li&gt;Menu 1&lt;/li&gt; &lt;li&gt;Menu 2&lt;/li&gt; &lt;li&gt;Menu 3&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>... but I could do this ...</p> <pre><code>.navbar { background:gray; } .navbar-item { display:inline;background:#ffffff; } &lt;ul class="navbar"&gt; &lt;li class="navbar-item"&gt;Menu 1&lt;/li&gt; &lt;li class="navbar-item"&gt;Menu 2&lt;/li&gt; &lt;li class="navbar-item"&gt;Menu 3&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Some would say (and might be right) that the second option would be faster. </p> <p>But if you multiply the second method across all pages I see the following disadvantages:</p> <ol> <li>The page size will increase because all the elements having classes</li> <li>Number of css classes can get quite large which would require more css class parsing</li> </ol> <p>My pages seem to be ~ 8KB with ~1000 DOM elements.</p> <p>So my real question is how do I create a test bed where I could test performance deltas based on strategy taken for realistic web page sizes? Specifically how do i know how long it takes for a page to be displayed? javascript? how exactly?</p> <p>Help and just plain opinions are welcome!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload