What difference does style bloat make?
Another test (https://benfrain.com/selector-test/2-01.html): I grabbed a big fat style sheet that had absolutely no relevance to the DOM tree. It was about 3000 lines of CSS. All these irrelevant styles were inserted before a final rule that would select our inner a.link node and make it red. I did the same averaging of the results across 5 runs on each browser.
Half those rules were then cut out and the test repeated (https://benfrain.com/selector-test/2-02.html) to give a comparison. Here are the results:
|
Test |
Chrome 34 |
Firefox 29 |
Opera 19 |
IE 19 |
Android 4 |
|
Full bloat |
64.4 |
237.6 |
74.2 |
436.8 |
1714.6 |
|
Half bloat |
51.6 |
142.8 |
65.4 |
358.6 |
1412.4 |
Rules diet
This provides some interesting figures. For example, Firefox was 1.7X slower to complete this test than it was with its slowest selector test (test 6). Android 4.3 was 1.2X slower than its slowest selector test (test 6). Internet Explorer was a whopping 2.5X slower than its...
