March 25th, 2009
No Comments

Rolling out Sly - The JavaScript Selector Engine

Finally, a new selector engine!

Sly is a turbocharged, cross-browser, library-agnostic JavaScript class for querying DOM documents using CSS3 selectors.

If you’re a code geek like me, you might want skip the details and go directly to the source, the speed tests or the specs.

Sly awesomeness:

  • Pure and powerful JavaScript matching algorithm for fast and accurate queries
  • Extra optimizations for frequently used selectors and latest browser features
  • Works uniformly in DOM documents, fragments or XML documents
  • Utility methods for matching and filtering of elements
  • Standalone selector parser to produce JavaScript Object representations
  • Customizable pseudo-classes, attribute operators and combinators
  • Just 3 kB! (minified and gzipped, 8 kB without gzip)
  • No dependencies on third-party JS libraries, but developers can override internal methods (like getAttribute) for seamless integration.
  • Code follows the MooTools philosophy, respecting strict standards, throwing no warnings and using meaningful variable names

Querying the DOM with Sly:

// Finds all odd rows in all tables
var rows = Sly.search('table td:odd');

// Finds all links with class "internal" and an attribute "href" starting with "#".
var links = Sly.search('a.internal[href^="#"]');

// Another notation is also possible, since Sly acts as a constructor
var snippets = Sly('pre.highlight.javascript > code').search();

// features is just one element, lists has all list items are siblings of features
var features = Sly.find('#features');
var lists = Sly.search('~ ul', body);

more examples and documentation.

Performance

But enough babbling: I know you just want speed and validity results. The following results were measured using a list of frequently used selectors, searching on a copy of yahoo.com, running in slickspeed.

Sly - Selector Performance


(See also the DOM fragment speed graph) If you are interested, run the various speed tests on your own system and post your results.

The adapted version of slickspeed also supports other test cases, like querying on a DOM fragment or an XML document. They make sure that Sly and other engines work the same in all environments.

If you want to know more, visit the repository at github, it holds the source, documentation and the test suite. The next post will give more technical details, what secrets can make this small script so blazing fast. Any feedback is welcome, keep the comments coming.

Keywords:
Share it: Stumble it!Digg This!del.icio.us (No Posts)

discussion by DISQUS No Comments

Please use the support forums for discussing the project, asking questions or posting bug-fixes!

Sort:
No Comments
  • First
  • ‹ Prev
  • Next ›
  • Last
No Comments
  • First
  • ‹ Prev
  • Next ›
  • Last

Post your comment

Please use the support forums for discussing the project, asking questions or posting bug-fixes!


Internet Consultant & Contractor

I'm available to combine forces with you and your team to find the most simple, elegant and convenient web solutions . I await your call.

If you just like my work and want to say Thank You, donate via PayPal or Amazon Wish List.

Developer Resources & Tools