JavaScript CSS Selector Benchmarks
On all mondern javascript frameworks there are ways to access the DOM through CSS Selectors.
These are intended to provide information about the structure of your HTML in a cross-platform way. Each library is optimized in it's own way, and so is each browser.
Using a slightly modified version of slickspeed by Valerio Proietti,
I am testing the latest version of all the popular javascript libraries against the same CSS Selectors on the same document. The time it takes each library to run is saved and graphed.
You can help too! Run the test on your browser and submit your results to be included in this experiment. (Stats Updated Every 30 Mins.)
For Chrome, Safari 3+, Opera 10, and Firefox 3.1/3.5 I also include the browsers' native selector (document.querySelectorAll) in the benchmark.
Graphs
View More Graphs
Slowest Recorded Time: 14714ms
Library: YUI 2.7.0b
Browser: IE 6.0/WinXP
Fastest Recorded Time: 0ms
Library: Native
Browser: Safari 4.0/WinXP
Stats Last Updated: October 11, 2012, 7:30:01 PDT
Results in Queue: 85
Known Issues
Native Browser Selector (
document.querySelectorAll) throws syntax errors on the following tests:
- h1[id]:contains(Selectors) & p:contains(selectors) - :contains() is not a valid selector according to the W3C Spec, but all major JS libraries support it.
- div[class!=made_up] - != is not a valid conditional pattern according to the W3C Spec, but all major JS libraries support it.
Note: Native Browser Selector is only tested on Chrome, Safari 3+, Opera 10, and Firefox 3.1/3.5.
IE 8.0 also technically supports
document.querySelectorAll, however it throws 10 errors with the current selector set, so was not included in this experiment.
IE 8.0 does not yet support :nth-child() and :not() selectors in it's native version.
Prototype & Dojo return inconsistant elements on the following selectors:
- p:contains(selectors) / Prototype 1.6.0.3 returns 324 results & Dojo 1.2.3 returns 57; others return 54 (:contains() has no formal definition in the W3C Spec, so discrepancies are to be expected)
- p:only-child / Dojo 1.2.3 returns 324; others return 3 (Reason unknown) (Fixed in Dojo 1.3b3)
Firefox 3.0 returns inconsistant elements on the following selectors:
(Fixed in Firefox 3.1)
- div & div, p, a & div:not(.example) / Prototype 1.6.0.3 - Returns 1 extra div (Reason unknown)
Internet Explorer 6, 7 & 8 return inconsistant elements on the following selectors:
- p:nth-child(even) & p:nth-child(2n) / YUI 2.7.0b - Returns 1 extra div (Reason unknown)
- p:nth-child(odd) & p:nth-child(2n+1) / YUI 2.7.0b - Returns 1 less div (Reason unknown)
One obvious hole in this experiment is the speed of the tester's computer, which varies greatly depending on hardware, software, and individual configurations.
My hope is that we can get enough variaty of users and browsers in this experiment that this will average itself out. This is intended to be a way to judge the speed of libraries and browsers.
Questions? Comments? Suggestions?
Let us know!
Updated Aug 3rd, 2009: Updated Dojo to latest version. YUI update... eventually.
New version coming soon!