Skip to content

Instantly share code, notes, and snippets.

@tagliala
Created October 26, 2013 23:09
Show Gist options
  • Select an option

  • Save tagliala/7175687 to your computer and use it in GitHub Desktop.

Select an option

Save tagliala/7175687 to your computer and use it in GitHub Desktop.

Ten days ago I submitted a question on StackOverflow: "How to profile CSS selectors?" 1 and I didn't get proper answers. I'm going to repost (and update) that question here for faster reading

  1. Google removed the CSS Profiler 2

  2. Firefox doesn't have one 3

  3. Opera had dragonfly, but now Opera is Blink based... and dragonfly is gone.

  4. The only profiler around there in Safari, doesn't work on my 7.0.0 / OSX 10.9. (it keeps recording CSS and I can't stop it)

  5. I know about "CSS-Stress-Testing-and-Performance-Profiling" 4 but I didn't figure it out how to use it for my purposes.

The chromium guys say: "CSS selector matching is now reasonably fast for the absolute majority of common selectors that used to be slow at the time of the profiler implementation", well...

I came across some benchmarks on jsperf.com like http://jsperf.com/css-selector-speed/15 and basing on that one I wrote: http://tagliala.github.io/vectoriconsroundup/cssperf/fa400 and http://tagliala.github.io/vectoriconsroundup/cssperf/fa321

I ran those tests (repeating them several times, results may change a lot across different runs) on different browsers and hardware and I got these results: https://gist.github.com/tagliala/7174356

It seems there are still differences and when developing css frameworks you should take care of selectors.

So... are you still profiling CSS selectors? And how?

Sorry for my English

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment