{Carrer web log}

Blog about web design & development

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




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 Anonymous // 4/12/2011

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

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

    @Anonymous: light it is! ;-)  

  3. // Blogger 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. // Blogger 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 Anonymous // 4/15/2011

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

  6. // Blogger 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. // Blogger buytwitterfollowers // 5/25/2011

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

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License