Some takeaways from these tests:
- Sweating over the selectors used in modern browsers is futile; most selection methods are now so fast it's really not worth spending much time over. Furthermore, there is disparity across browsers of what the slowest selectors are anyway. Look here last to speed up your CSS.
- Excessive unused styles are likely to cost more, performance wise, than any selectors you chose so look to tidy up there second. 3000 lines that are unused or surplus on a page are not even that uncommon. While it's common to bunch all the styles up into a great big single
styles.css, if different areas of your site/web application can have different (additional) style sheets added (dependency graph style), that may be the better option. - If your CSS has been added to by a number of different authors over time, look to tools like UnCSS (https://github.com/giakki/uncss) to automate the removal of styles; doing that process by hand is no fun!
- The battle for high performing CSS will not be won in the selectors used, it will be won with the judicious use of property and values.
- Getting something painted to screen fast is obviously important but so is how a page feels when the user interacts with it. Look for expensive property and value pairs first (Chrome continuous repaint mode is your friend here), they are likely to provide the biggest gains.
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.