Performance inside the brackets
The final test (https://benfrain.com/selector-test/3-01.html) I ran was to hit the page with a bunch of expensive properties and values. Consider this rule:
.link { background-color: red; border-radius: 5px; padding: 3px; box-shadow: 0 5px 5px #000; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); display: block; }
With that rule applied, here are the results:
Test |
Chrome 34 |
Firefox 29 |
Opera 19 |
IE 19 |
Android 4 |
Expensive Styles |
65.2 |
151.4 |
65.2 |
259.2 |
1923 |
Here all browsers are at least up with their slowest selector speed (IE was 1.5X slower than its slowest selector test (10) and the Android device was 1.3X slower than the slowest selector test (test 6)) but that's not even the full picture. Try and scroll that page! Repaint on those kind of styles can bring a browser to its knees (or whatever the equivalent of knees...