findCSS
findCSS is an open source(MIT license) javascript query library to return an array of elements based off of CSS selectors. It's main page is at http://code.google.com/p/findcss/. You can find all documentation, SVN access info, and downloads there.
Why?
I wrote findCSS as a learning experience mainly. I wanted to figure out how things like jQuery, and cssQuery worked. I also wanted a library that made a good compromise between code size and speed.
Comparisons
As you might know there are quite a few libraries out there that accomplish this task, but everyone of them(including mine) has its flaws. The major problem I have with most of them is that they are part of a larger library. This is great if you would like to make use of the libraries other features, but it is ridiculous to include a 70kb javascript file to accomplish this. That means jQuery, Prototypes $$ function, and DomQuery all won't work for me. The only stand-alone library I know of is cssQuery, and compared to the others cssQuery is quite slow. So how does findCSS compare? Well, it isn't exactly small, but it does come in under 6kb(compressed). Speed-wise, findCSS is blazing fast in Firefox and Opera, but can be slow(er) in Internet Explorer(no xpath support). Another limitation in findCSS is that it does not even attempt to support xpath syntax( or some other more advanced features).
Benchmarks
Before I actually give you the benchmark results, let me say thanks to jQuery(http://jquery.com/blog/2007/01/11/selector-speeds/), because I used their comparison suite to get these results. Also, each test was run 5 times. findCSSx does not use xpath, whereas findCSS does. Now on to the results.
Firefox
| Test | findCSS | findCSSx | jQuery | DomQuery | cssQuery |
|---|---|---|---|---|---|
| 13 / 0 | 4 / 0 | 0 / 0 | 2 / 0 | 0 / 4 | |
| W / F | W / F | W / F | W / F | W / F | |
| * | 12.6ms | 0ms | 90.6ms | 12.4ms | 56.4ms |
| body | 0ms | 0ms | 0ms | 0ms | 6ms |
| body div | 6.2ms | 22ms | 24.8ms | 3ms | 31.2ms |
| div | 6ms | 0ms | 28ms | 3ms | 31ms |
| div div div | 9.2ms | 118.8ms | 450.2ms | 81.4ms | FAIL |
| div div | 9.4ms | 72ms | 237.8ms | 28.2ms | FAIL |
| .dialog | 6.2ms | 34.4ms | 31.2ms | 15.6ms | 72ms |
| div.dialog | 3.2ms | 18.6ms | 15.8ms | 9.4ms | 46.6ms |
| div .dialog | 9.2ms | 237.6ms | 225ms | 53ms | FAIL |
| #speech5 | 0ms | 0ms | 0ms | 0ms | 65.6ms |
| div#speech5 | 0ms | 0ms | 0ms | 0ms | 34.4ms |
| div #speech5 | 3ms | 234.2ms | 115.8ms | 34.4ms | FAIL |
| div > div | 6ms | 90.6ms | 84.2ms | 37.6ms | 131.2ms |
| div.scene div.dialog | 6.2ms | 46.8ms | 31.2ms | 15.8ms | 65.8ms |
| div#scene1.scene div.dialog div | 6.2ms | 56.2ms | 53.4ms | 15.8ms | 87.6ms |
| #scene1 #speech1 | 0ms | 28.2ms | 6.2ms | 0ms | 97ms |
| body > div.dialog div#speech5 | 0ms | 31ms | 12.4ms | 12.4ms | 37.6ms |
| body > div.dialog div:nth-child(even) | 50.2ms | 47ms | 559.4ms | 193.8ms | 1543.8ms |
| body > div.dialog div:nth-child(odd) | 50ms | 46.8ms | 549.8ms | 193.8ms | 1534.4ms |
| body > div.dialog div:nth-child(1) | 43.8ms | 50ms | 37.4ms | 28.2ms | 1059.2ms |
| body > div.dialog div:first-child | 6.2ms | 31ms | 37.6ms | 15.6ms | 50ms |
| div[@id*="speech"] | 6.2ms | 31ms | 40.6ms | 21.8ms | 43.8ms |
| body > div.dialog div:last-child | 6.2ms | 31.2ms | 37.4ms | 22ms | 53.4ms |
Opera
| Run? | Test | findCSS | findCSSx | jQuery | DomQuery | cssQuery |
|---|---|---|---|---|---|---|
| 8 / 0 | 1 / 0 | 0 / 0 | 5 / 0 | 0 / 4 | ||
| W / F | W / F | W / F | W / F | W / F | ||
| * | 3.2ms | 0ms | 106.2ms | 3ms | 9.2ms | |
| body | 0ms | 0ms | 0ms | 0ms | 0ms | |
| body div | 0ms | 22ms | 31ms | 3ms | 3ms | |
| div | 0ms | 0ms | 31.2ms | 0ms | 3ms | |
| div div div | 6.2ms | 93.6ms | 290.8ms | 18.6ms | FAIL | |
| div div | 0ms | 68.6ms | 172ms | 18.6ms | FAIL | |
| .dialog | 3ms | 6.2ms | 15.6ms | 3ms | 12.4ms | |
| div.dialog | 0ms | 3ms | 9.4ms | 0ms | 6.2ms | |
| div .dialog | 6ms | 156.4ms | 47ms | 15.6ms | FAIL | |
| #speech5 | 0ms | 0ms | 0ms | 0ms | 6.2ms | |
| div#speech5 | 0ms | 0ms | 0ms | 0ms | 3ms | |
| div #speech5 | 0ms | 159.4ms | 22ms | 9.4ms | FAIL | |
| div > div | 0ms | 31.2ms | 47ms | 6ms | 15.6ms | |
| div.scene div.dialog | 3ms | 28.2ms | 12.6ms | 6.2ms | 15.8ms | |
| div#scene1.scene div.dialog div | 0ms | 34.4ms | 31.2ms | 6.2ms | 15.8ms | |
| #scene1 #speech1 | 0ms | 21.8ms | 0ms | 0ms | 12.4ms | |
| body > div.dialog div#speech5 | 0ms | 25ms | 3ms | 0ms | 3ms | |
| body > div.dialog div:nth-child(even) | 47ms | 46.8ms | 59.2ms | 15.6ms | 197ms | |
| body > div.dialog div:nth-child(odd) | 47ms | 49.8ms | 59.4ms | 12.6ms | 199.8ms | |
| body > div.dialog div:nth-child(1) | 31.2ms | 34.4ms | 9.4ms | 3ms | 140.6ms | |
| body > div.dialog div:first-child | 6ms | 25ms | 9.2ms | 0ms | 15.6ms | |
| div[@id*="speech"] | 6.2ms | 15.6ms | 15.6ms | 3ms | 6.2ms | |
| body > div.dialog div:last-child | 3ms | 28ms | 9.4ms | 3.2ms | 9.4ms |
Internet Explorer
| Run? | Test | findCSS | findCSSx | jQuery | DomQuery | cssQuery |
|---|---|---|---|---|---|---|
| 0 / 0 | 0 / 0 | 0 / 0 | 18 / 0 | 0 / 5 | ||
| W / F | W / F | W / F | W / F | W / F | ||
| * | 0ms | 0ms | 375ms | 12.4ms | FAIL | |
| body | 0ms | 0ms | 0ms | 0ms | 0ms | |
| body div | 93.8ms | 96.8ms | 109.4ms | 6.2ms | 15.6ms | |
| div | 0ms | 0ms | 109.4ms | 3.2ms | 15.6ms | |
| div div div | 447ms | 453ms | 518.6ms | 62.4ms | FAIL | |
| div div | 284.4ms | 284.4ms | 362.4ms | 31.2ms | FAIL | |
| .dialog | 109.2ms | 125ms | 31.2ms | 12.4ms | 34.4ms | |
| div.dialog | 34.4ms | 34.4ms | 18.8ms | 6.2ms | 15.8ms | |
| div .dialog | 659.4ms | 722ms | 137.4ms | 37.4ms | FAIL | |
| #speech5 | 0ms | 0ms | 0ms | 0ms | 0ms | |
| div#speech5 | 0ms | 0ms | 0ms | 0ms | 15.6ms | |
| div #speech5 | 668.8ms | 731.2ms | 81.6ms | 31.2ms | FAIL | |
| div > div | 178ms | 184.2ms | 137.4ms | 31ms | 343.4ms | |
| div.scene div.dialog | 134.4ms | 134.4ms | 31.2ms | 15.4ms | 31.2ms | |
| div#scene1.scene div.dialog div | 171.8ms | 172ms | 94ms | 15.6ms | 47ms | |
| #scene1 #speech1 | 97ms | 97ms | 9.4ms | 0ms | 15.6ms | |
| body > div.dialog div#speech5 | 96.8ms | 96.8ms | 12.4ms | 9.4ms | 24.8ms | |
| body > div.dialog div:nth-child(even) | 306.2ms | 303.2ms | 212.4ms | 125ms | 824.8ms | |
| body > div.dialog div:nth-child(odd) | 306.2ms | 303ms | 228ms | 125ms | 825ms | |
| body > div.dialog div:nth-child(1) | 125ms | 125ms | 28ms | 18.8ms | 593.6ms | |
| body > div.dialog div:first-child | 112.6ms | 109.4ms | 28ms | 15.6ms | 31.2ms | |
| div[@id*="speech"] | 46.8ms | 47ms | 31.2ms | 12.4ms | 22ms | |
| body > div.dialog div:last-child | 118.8ms | 122ms | 28.2ms | 15.6ms | 31.4ms |
Conclusions
With these results, I can conclude that findCSS has a lot of potential. If I can get it working (much) faster in Internet Explorer it will be able to hold its own with the best of the CSS selector libraries. As it is, DomQuery is just plain amazing, solely for its speed in Internet Explorer. I will definitely be looking at DomQuery more closely to see how it pulls it off. Until then, findCSS will still be a useful tool in my future javascript projects
Warning: WARNING: Comments is not properly cleaning input params. in /home/freegam4/public_html/webtech/lib/classes/class.module.inc.php on line 1500