Created
October 15, 2013 14:45
-
-
Save ear1grey/6992688 to your computer and use it in GitHub Desktop.
I thought it would be interesting to see how fast (or not) some CSS selectors really are. Perhaps a framework for capturing this data and visualising it in some way (by browser / version maybe) would be useful. I tried two different ways of setting the stylesheet, one in a loop, and the other using a timeout to ensure that the UI gets a chance t…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <title>Dumb CSS Speed Test</title> | |
| <style id="x"> | |
| </style> | |
| <nav> | |
| <ul> | |
| <li>1 | |
| <ul> | |
| <li class="q">1</li> | |
| <li class="q">2</li> | |
| <li class="q"3</li> | |
| </ul> | |
| </li> | |
| <li>2 | |
| <ul> | |
| <li class="q">1</li> | |
| <li class="q">2</li> | |
| </ul> | |
| </li> | |
| <li>3 | |
| <ul> | |
| <li class="q">1</li> | |
| </ul> | |
| </li> | |
| <li class="q">4</li> | |
| </ul> | |
| </nav> | |
| <script> | |
| var x = document.getElementById("x"); | |
| var loops = 3000; | |
| var flip = function(str, count) { | |
| if (count <= 0) { | |
| console.timeEnd('Timeout Timer: "' + str + '"'); | |
| return; | |
| } | |
| x.innerHTML = count%2 ? str : ""; | |
| setTimeout( | |
| function() { | |
| flip(str, --count) | |
| }, | |
| 0 | |
| ); | |
| } | |
| var timedFlip = function(str, loops) { | |
| console.time('Timeout Timer: "' + str + '"'); | |
| flip(str, loops); | |
| } | |
| var timedLoop = function(str, loops) { | |
| console.time('Loop Timer: "' + str + '"'); | |
| for (var count=0; count<loops; count++) { | |
| x.innerHTML = count%2 ? str : ""; | |
| } | |
| console.timeEnd('Loop Timer: "' + str + '"'); | |
| } | |
| var experiment = function(str) { | |
| timedFlip(str, loops); | |
| timedLoop(str, loops); | |
| } | |
| experiment("", loops); | |
| experiment(" ", loops); | |
| experiment("_", loops); | |
| experiment("nav ul>li { background: red; }", loops); | |
| experiment("nav li { background: red; }", loops); | |
| experiment(".q { background: red; }", loops); | |
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 15:40:53.561 Loop Timer: "": 36.87ms | |
| 15:40:53.605 Loop Timer: " ": 44.05ms | |
| 15:40:53.676 Loop Timer: "_": 70.02ms | |
| 15:40:53.731 Loop Timer: "nav ul>li { background: red; }": 55.3ms | |
| 15:40:53.786 Loop Timer: "nav li { background: red; }": 54.77ms | |
| 15:40:53.843 Loop Timer: ".q { background: red; }": 56.34ms | |
| 15:41:13.085 Timeout Timer: "": 19560.73ms | |
| 15:41:13.085 Timeout Timer: " ": 19524.13ms | |
| 15:41:13.087 Timeout Timer: "_": 19481.96ms | |
| 15:41:13.088 Timeout Timer: "nav ul>li { background: red; }": 19411.77ms | |
| 15:41:13.088 Timeout Timer: "nav li { background: red; }": 19356.21ms | |
| 15:41:13.088 Timeout Timer: ".q { background: red; }": 19301.39ms |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Loop Timer: "": 6.809ms | |
| Loop Timer: " ": 750.598ms | |
| Loop Timer: "_": 797.544ms | |
| Loop Timer: "nav ul>li { background: red; }": 796.679ms | |
| Loop Timer: "nav li { background: red; }": 794.739ms | |
| Loop Timer: ".q { background: red; }": 795.290ms | |
| Timeout Timer: "": 19124.744ms | |
| Timeout Timer: " ": 19118.430ms | |
| Timeout Timer: "_": 18367.763ms | |
| Timeout Timer: "nav ul>li { background: red; }": 17569.719ms | |
| Timeout Timer: "nav li { background: red; }": 16774.980ms | |
| Timeout Timer: ".q { background: red; }": 15979.906ms |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment