CSS Selectors - Speed Myths
July 10, 2007 by Jack Slocum
On of the things updated in Ext 1.1 RC1 was DomQuery, the CSS selector implementation in Ext. There seems to be a trend sweeping through all of the popular JavaScript libraries of implementing or improving existing DOM querying using CSS selectors. In fact, since my original post with querying benchmarks for the various selector implementations, overall selector processing power has gone from Pinto power to a Mustang GT 500.
Has it really?
While there is no doubt that there have been improvements in every library, the manner in which each has gotten there is different. Some use XPath support in FireFox to gain a slight edge in that browser, but lag way behind in other browsers. I have tried to remain as impartial as possible in my evaluations of each library’s implementation.
Mootools
The latest on the scene with their slickspeed post, has implemented a nice test suite. In fact, it was so easy to set up I decided to use it for the tests included in this post below.
For some reason, although their test suite is titled “speed/validity selectors test for frameworks”, it leaves out many useful selectors such as div.dialog.emphatic (multiple classes) and div:not(.dialog) but includes completely useless selectors such as div div div. I have added those two selectors in my tests below.
The Mootools selector implementation relies heavily on XPath in FireFox. Performance in other browsers drops significantly.
Prototype
Prototype’s selector implementation is based on the initial Ext DomQuery code mixed with XPath support in FireFox. I had high hopes when seeing the first benchmarks for their implementation, but somewhere something must have gone wrong. The XPath picks up a lot of slack in FireFox but similar to Mootools, performance in other browsers drops significantly.
Dojo
Dojo’s selector implementation borrows ideas from various sources. It also uses XPath in FireFox but it’s more selective in the selectors it converts to XPath. Its cross-browser performance is also pretty consistent.
jQuery
jQuery’s recent 1.1.3 release gave it quite a big boost in performance. jQuery, like Ext, does not use XPath in FireFox. Credit goes to John Resig for the most efficient nth-child implementation I have seen to date. In fact, Ext 1.1’s new nth-child implementation is modeled very closely after it.
jQuery was the only library other than Ext that passed all the tests.
Ext
DomQuery’s performance is based on highly optimized code. In FireFox, even without XPath Ext is right there in the mix - I think that says a lot about the efficiency of the code. DomQuery by far has the most consistent performance cross browser. Like jQuery, Ext supports unlimited chaining of filters and selectors and querying XML Documents.
Results
Here are my results. Bold indicates the fastest time.
| Library | IE 7 | FireFox 2 | Safari 2.0.4 | Opera 9.2 | IE 6 | Errors |
|---|---|---|---|---|---|---|
| Ext | 202 ms | 239 ms | 330 ms | 96 ms | 902 ms | 0 errors |
| jQuery | 334 ms | 392 ms | 843 ms | 176 ms | 1948 ms | 0 errors |
| Dojo | 415 ms | 315 ms | 917 ms | 110 ms | 1775 ms | 4 errors |
| Mootools | 684 ms | 136 ms | 1446 ms | 129 ms | 2655 ms | 4 errors |
| Prototype | 868 ms | 172 ms | 2031 ms | 119 ms | 3743 ms | 2 errors (IE only) |
IE7, FF2 and Opera 9 tested on Vista, Core 2 Duo 6600, 4GB RAM
Safari 2 tested on Mac OS X 10.4.9, Core 2 Duo T5600, 2GB RAM
IE6 tested on XP, Athlon x64 3200+, 1.5GB RAM
Run them yourself
http://extjs.com/playpen/slickspeed
Why another test?
These tests were conducted to test the 1.1 RC1 release, and to dispel some myths about the selector speed of each library.
Can you test the new YUI selector also ?
even if its still beta, i’m curious how it performs compared to the others
http://developer.yahoo.com/yui/selector/
February 9th, 2008
4:42 am
Florin,
The test suite is openly available (http://code.google.com/p/slickspeed/). You should download it and give it a try.
February 9th, 2008
10:55 am
[…] CSS selectors I recently came across a post of Jack Slocum about CSS Selectors implemented in difrent js frameworks and sience I am a YUI user and they recently launched their […]
February 11th, 2008
6:43 pm
Download Speed Tests…
Computer Virus Protection…
February 23rd, 2008
12:30 pm
[…] 详细内容 […]
February 28th, 2008
9:35 pm
Thanks for the download link Jack, nice blog you have here. Sorry to see so many spam comments but I guess that comes with popularity?
May 13th, 2008
5:14 pm
hi…
Not sure that this is true) but thanks…
December 31st, 2008
11:43 am
jujuywrg…
jujuywrg…
January 5th, 2009
8:07 am
Shag Hairstyles and Haircuts…
shag hairstyle basically gotits name from the word “shaggy” since …once the hair is cutand layered it gives off a shaggy look. The shag hairstyle has always been apopular hairstyle, and there are plenty ofshag hairstyles to choose from…
February 26th, 2009
9:25 pm
Arbonne skin care line overview…
Arbonne International is one of the prestigious companies in the world when it comes to skin and beauty care. Its skin care product line is one of the best in the world that many women. The products of Arbonne International skin care products are form…
March 25th, 2009
6:56 pm
Shag Haircuts for Different Types of Hair…
Stylists of the those celebrities are magicians, capturing each of their personalities and presenting them in sophisticated fun loving shag haircuts. Wish we’ll see more and more celebrities take our breath away with their gorgeous shags….
March 28th, 2009
1:08 pm
Mortgage Refinance Costs…
If you are thinking over a mortgage refinance, you should consider a lot of mortgage refinance program types. For example, you can look into a 10 year fixed rate mortgage refinance. In this plan your mortgage payments higher than a longerterm loan, but…
April 15th, 2009
6:40 pm
Printable Paper Dolls review…
Fashion printable paper dolls - are dolls made for reflecting fashion trends or just fantasy play. The fashion dolls are made of vinyl or another plastic, and are manufactured both as for play and for collections. They are enjoyed by many people around…
April 18th, 2009
11:39 am
Why Former Smokers Start Smoking Again?…
All kind of tobacco is dangerous, no matter how it is packaged, said doctors. For example they found that smoking tobacco described as ‘light’ and ‘mild’ is not better than regular cigarettes. Researchers reported that the tobacco companies have pr…
April 21st, 2009
5:10 am
Smoke if You can…
Scientists reported in a study that heart attacks are hitting the overweight people more than a decade sooner than “normal” weight people….
April 26th, 2009
4:25 am
Swine flu vaccine side effects…
Recommendations to prevent spread of the swine flu among people include using standard infection control against flu. This means frequent washing of hands with water and soap or with alcohol-based hand sanitizers, especially after being outside….
April 30th, 2009
4:10 pm
The hottest short hairstyles…
Kylie Bax has a very cool new short hairstyle with lots of layers that is very short at the back….
May 5th, 2009
7:29 am
hair style pictures…
A short hair style can reveal some facts about your face that you are not quite are gpoing to like. Therefore, this is something to be aware of for those who might be more introverted about some of our facial features. It is also said that it might tak…
May 13th, 2009
5:09 pm
metformin forum…
metformin not dissolving. metformin bodybuilding. side effects metformin. drug metformin. 2 diabetes metformin type. clomid metformin and twins. …
June 15th, 2009
9:39 pm
dosage tamiflu…
tamiflu length of storage. tamiflu directions. tamiflu pros cons. aids tamiflu flu. tamiflu and dizziness. …
June 28th, 2009
10:45 pm