My JavaScript book is out! Don't miss the opportunity to upgrade your beginner or average dev skills.

Tuesday, April 28, 2009

The Fastest Selector Engine For FireFox 3.0 ?

I am putting some effort to make vice-versa project a good, production ready, alternative against common libraries, and since these days I am working hard with XML, XSL(T), and XPath I decided to try an experiment implementing CSS to XPath translator for FireFox 3.0



With version 3.1 we will have querySelector and querySelectorAll but version 3.0 is still the most used one, FireFox speaking!

The nightly build of vice-versa introduces a new file, mainly used for personal experiments via vice-versa library and the first experiment is an improved document.query for those browsers with document.evaluate support without document.querySelectorAll.
Unfortunately Internet Explorer < 8 does not support XPath queries over (x)HTML but at least for FireFox 3.0 I have obtained best overall performances via SlickSpeed Selector Speed Test comparing latest version of each library such Dojo, DOMAssistant, Sizzle (congrats for the new site!), Sly, and finally vice-versa project.
Here the summary, from faster to slower:

vice-versa    760ms
Dojo 1.3.1    868ms (2 tests failed)
DOMAssistant  880ms (good stuff Robert!)
Sly           890ms
Sizzle        914ms

Now, the good part is that nowadays every selector engine seems to perform truly fast and in whatever browser you like, but the "even better" part is that the experiments file in vice-versa is 1Kb (minified and gzipped) and with just "that Kb" it is possible to use a specific and fast selector engine for FireFox 3.0.

Finally, the experimental CSS to XPath translator cannot support pseudo searches like :hover, :active, or similar, due to the XPath nature, a query language mainly designed for XML where CSS, unless we do not transform it via XSLT, has a complete different meaning from the one used in (x)HTML.

I wonder now who will be able to create better overall performances for FireFox 3.0 ( changing my translator implementation, for example ;) )
at

7 comments:

  1. Anonymous28 April, 2009 15:16

    Hey Andrea, nice project. But on the project page there is a typo in the link to your blog. Now it leads to some "Mega site of Bible studies" hosted on blogpot.com (not blogspot.com) ;-)

    ReplyDelete
  2. Andrea Giammarchi28 April, 2009 15:42

    ah ah ... am I stupid? :D
    thanks, instantly fixed :)

    ReplyDelete
  3. Anonymous28 April, 2009 22:47

    Hi, Andrea! These days I was thinking about a XPATH selector and made some tests. Really, in Firefox the performance is wonderful even compared to native methods. But at Opera... Make a test, man.

    Bye!

    ReplyDelete
  4. Andrea Giammarchi28 April, 2009 23:00

    sobral, I did ... version 10 which supports querySelectorAll as well and performances are like Safari and Chrome :)

    If you are trying an old version it is possible it does not support document.evaluate so you are using the alternative CSS trick rather than XPath .... not sure thou, syou should tell me which version you are trying. Cheers

    ReplyDelete
  5. Andrea Giammarchi28 April, 2009 23:00

    P.S. ... post title: "The Fastest Selector Engine For FireFox 3.0 ?"
    Opera is not included, the experiments.js file is, as it says, experimental ;)

    ReplyDelete
  6. Anonymous30 April, 2009 16:13

    Opera 9.64. I just thought that the information could be useful.

    I stopped my tests because Opera 10 and Firefox 3.5 are so close... I don't want to do a short life job. [lol]
    Well, I was lazy. [lol] I'll try to look your code this afternoon.
    Bye, man!

    ReplyDelete
  7. Andrea Giammarchi30 April, 2009 16:27

    sobral, just as I said, this document.query is experimental and optimized for FireFox.
    I added Safari 4 and Chrome support for missed CSS3 selectors via XPath but still, experimental stuff.
    The file experiments has bee included but it is strongly suggested to use external selector engines such Sizzle or Sly or, if not necessary, 4 basic selectors vice-versa is optimized for:
    #id, .className, tagName, tagName.className
    that's it :)

    ReplyDelete

Note: Only a member of this blog may post a comment.