Geek Answers Handbook

Is [selector]> * really slow

So, I am creating a JavaScript widget set (jQuery), and I want to make sure that all elements of these widgets use box-sizing: border-box (and yes, I know, this means that I can only support IE version 8 or higher, I'm fine with).

Now I heard what to do [selector] > * very slowly, but how slow is it?

I mean only for one of the widgets, I have this selector to make sure that all elements have the right window size:

 .jg-grid-wrap, .jg-grid-content-outer-wrap, .jg-grid-colum-actions a, .jg-grid-content-wrap, .jg-grid-wrap .hide, .jg-grid-wrap ul, .jg-grid-wrap ul li, .jg-grid-header-wrap, .jg-grid-header-wrap li, .jg-grid-header-wrap .sort-indicator, .jg-grid-row, .jg-grid-row li, .jg-grid-footer-wrap, .jg-grid-footer-wrap .column-selection .jg-grid-wrap .controls, .jg-grid-wrap .controls .first-page-link, .jg-grid-wrap .controls .previous-page-link, .jg-grid-wrap .controls .next-page-link, .jg-grid-wrap .controls .last-page-link, .jg-grid-wrap .controls .column-selection-link, .jg-grid-wrap .controls .set-page-link, .jg-grid-wrap .controls .total-page-count, .jg-grid-wrap .controls .record-counts, .jg-grid-wrap .controls .record-display-text { box-sizing: border-box; }

but it would be much smaller and easier to just write:

 .jg-grid-wrap * { box-sizing: border-box; }

Also, if I add an element, now I must remember to add this to the huge selector, where with the star, I should not worry about it.

Do I really need to specify each individual element separately because [selector] > * really slow?

UPDATE

In the end, I'm just going to go with:

 [class^=jg-] * { box-sizing: border-box; }

This selector has ~ 14% of a total of 4 ms based on Google Chrome. Others are slightly smaller (~ 4%), but thinking about this, CSS will be the last place that I probably need to worry about performance (my javascript code and server code will be the main part of the bottleneck). If I really need to optimize my chrome CSS profiler, there when I need it.

+4
source share
2 answers

If you really need all the elements under the container marked with this class, you need

 .jg-grid-wrap *

The > operator limits compliance to direct children.

The performance impact is due to the fact that this means that every element needs to be checked when the layout is updated accordingly. You can do it a little better:

 .jg-grid-wrap div, .jg-grid-wrap form, .jg-grid-wrap ul

etc., with any block level elements that you are really interested in. (That is, you are really embarrassed if your <span> tags have a box-sizing property?)

CSS CSS Profiler can be very helpful when looking for expensive CSS rules. It should be something you research empirically before worrying too much about it; modern CSS mechanisms are pretty fast.

+6
source

Browsers evaluate CSS from right to left when drawing a page (re):

 .jg-grid-wrap > *

Basically this will fit all the page elements; then it checks the immediate ancestor of all elements and compares the class.

As bad as it sounds, it could be worse:

 .jg-grid-wrap *

For elements under .jg-grid-wrap this is not so bad, but other elements force the browser to move through the element tree up to html to find the ancestor.

Some of this logic can be slightly optimized, however, it is good to avoid it. So the trick is to maximize the right side of your CSS rules.

So, my conclusion: just leave only the code that seems optimal for the human eye, can be catastrophic for a bad browser :)

+1
source

More articles:


All Articles