How to test CSS selector performance?
How would I go about testing the performance benchmarks of different css selectors? I\'ve read articles like this. But I don\'t know if it is applicable to my website becaus
-
From reading the article you listed it looks like the difference between the two type of selectors is not worth worrying about. Make certain the css is clear enough to understand it, and only worry about speed after that proves to be the bottleneck.
讨论(0) -
Check out the Page Speed extension for Firefox. Once you run it for a page, under "Use efficient CSS selectors" it gives you a list of the offending CSS selectors along with brief explanations.
Also, there's another extension for Chrome - Speed Tracer. Amongst other things, it offers insight into time spent on CSS style recalculation and selector matching. This may just be what you are looking for.
讨论(0) -
there really is no need to do Menu 1
you can have a css class navbar li
remember too that external css files can be minified and cached whereas the html cannot. Performance is also a relative term: do they visit frequently? Is the network slow? are they state employees with ancient computers running IE6?
讨论(0) -
I don't have a direct answer to your question of how to build a page speed testing program. However, I will offer you some best practice guidelines to follow that will steer you in the right direction.
The page size will increase because all the elements having classes
The size of adding numerous classes is very much negligible for two reasons:
1) The additional size in your stylesheet will be cached (assuming you use externals, which you should).
2) The HTML markup from adding numerous classes to the DOM is 1kb at most. If it's more, than you need to take better advantage of inheritance.Number of css classes can get quite large which would require more css class parsing
You will have more CSS classes, yes... but binding rules to a CSS class is actually faster than the alternative of using descendant or adjacent selectors.
As long as you avoid descendant/adjacent selectors as much as reasonably possible, you use external stylesheets, and you take advantage of inheritance to reduce duplicate rules, you shouldn't need to worry about CSS performance stress tests.
讨论(0)
加载中...
- 热议问题