{Carrer web log} ←

Svetlo - One Line JavaScript Selector Engine

Tuesday, April 12, 2011 { 7 Comments }

I'm working on one new mini JavaScript Framework for building mobile apps.

Probably the most critical part of any JavaScript Framework is the selector engine. Naturally the faster is the selector engine the faster will be all the Framework.

Most of the modern selector engines are build upon querySelectorAll because it gives the best flexibility. Little problem with querySelectorAll is the speed.

Traditionally getElementById is much faster then querySelectorAll, but things are changing. Opera 11 has super optimized querySelectorAll and probably all the browsers in the future will try to speed optimize querySelectorAll.

For my (not yet published) JavaScript Framework I've used this code for the selector engine (codename Svetlo).

// Svetlo :

function $(selector){return Array.prototype.slice.call(document.querySelectorAll(selector))}

What this code does is putting the querySelectorAll results "toArray" and that helps the speed optimization. The code is not new I think the first time I saw it on John Resig blog.

I'm not even sure that this line of code can be called selector engine, but I think that it can be helpful to someone and is good baseline for writing JS applications that doesn't need to run in IE. Hint: Web apps for iPhone and Android.

I did some performance test.

The test are based on this principle http://jsperf.com/nodelist-vs-array-iteration

http://jsperf.com/svetlo-class

http://jsperf.com/svetlo-id/3

http://jsperf.com/svetlo/3

If my testing logic is correct result show that this selector engine is faster then the native querySelectorAll and equal like native getElementById method.

If my testing logic is correct result show that this selector engine is faster then the native querySelectorAll and equal like native getElementById method.

This solution will run on of Safari, Chrome, Firefox, Opera and doesn't support IE.
My intention was to build JS Framework for mobile webkit browsers(iOS, Android).
So if you building web app for iPhone, iPad, Android this selector engine can help you, if you need to support IE this selector engine is completely useless.

Other super small selectors:

Ben Alman QSA library
Dan Heberden Quewery
Dustin Diaz Qwery

All comments and suggestion about this small selector will be appreciated!

7 Responses to “Svetlo - One Line JavaScript Selector Engine”

1. //  Anonymous // 4/12/2011

   Hi,
   Svetlo means 'light' in Czech. Probably has similar meaning in most slavic languages  

2. //  Vladimir // 4/12/2011

   @Anonymous: light it is! ;-)  

3. //  psayre23 // 4/13/2011

   Might be interested in adding parent element for speed.
   
   function $(selector,parent){return Array.prototype.slice.call((parent||document).querySelectorAll(selector))}  

4. //  Vladimir // 4/14/2011

   @psayre23: You will have some small speed improvements by adding the "body" function $(selector) {return Array.prototype.slice.call( document.body.querySelectorAll(selector))} or by mixing with getElementById in some cases: function $(id,selector){return Array.prototype.slice.call(document.getElementById(id).querySelectorAll(selector));}  

5. //  Anonymous // 4/15/2011

   In my language Svetlo means "penis." Not so good.  

6. //  Vladimir // 4/15/2011

   @ Anonymous II: You made me smile, where are you from? So I will not use that word in your country :)  

7. //  buytwitterfollowers // 5/25/2011

   Loved the post but the point you make is a good one.
   branqueamento dentário  

Post a Comment

<< Home