jQuery selector vs native vs helper

Benchmark created by mflorida on February 12, 2015

Description

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<p id="foo">Bar</p>
<p id="foo!foo.foo/foo">Bar Too</p>

Setup

function getById(id) {
      return document.getElementById(id);
    }
    
    function $getById(id) {
      return $(document.getElementById(id));
    }
    
    var $foo = $('#foo');
    
    // use double-hash to force id-only selection
    
    function get$(el) {
      el = el.split('##');
      if (el[0] === '') {
        return $(document.getElementById(el[1]));
      }
      return $(el.join(''));
    }
    
    
    function $$(el) {
      if (!el || !jQuery) {
        return null
      }
      var $ = jQuery,
        $el = el,
        id_prefix = /##|#:|id:/,
        objType = Object.prototype.toString;
      if (!$el.jquery) {
        // special case for wrapping a native
        // DOM element (fastest)
        if (el.nodeType && el.nodeType === 1) {
          $el = $(el);
        }
        // special case for (faster) handling of id
        // using a 'special' id-only selector:
        // '#:', '##', or 'id:'
        // (this will tolerate crazy id strings)
        // document.getElementyById('foo.bar/baz') ==
        // $$('##foo.bar/baz') == $$('#:foo.bar/baz') == $$('id:foo.bar/baz')
        else if (el.search(id_prefix) === 0) {
          el = el.replace(id_prefix, '');
          $el = $(document.getElementById(el));
        }
        // jQuery can also wrap a NodeList - right?
        else if (['[object HTMLCollection]', '[object NodeList]'].indexOf(objType.call(el) > -1)) {
          $el = $(el);
        }
        // NOW try the standard jQuery selector
        else {
          $el = $(el);
        }
        // if there's not a matching DOM element yet,
        // then it's PROBABLY just an id string
        // without the 'special' prefix.
        // (this will also tolerate crazy ids)
        if (!$el.length) {
          $el = $(document.getElementById(el));
        }
        // if there's STILL not a matching DOM element
        // after trying to find an element with that ID,
        // then set $el to null
        if (!$el.length) {
          $el = null;
        }
      }
      return $el;
    }

Test runner

return $('#foo');

return document.getElementById('foo');

return $$('#foo');

return $$('foo');

return $$('##foo!foo.foo/foo')

return document.getElementById('foo!foo.foo/foo');

return $(document.getElementById('foo!foo.foo/foo'));

return getById('foo!foo.foo/foo');

return $getById('foo!foo.foo/foo');

return $$($('#foo'));

return $$($foo);

return $$(document.getElementById('foo!foo.foo/foo'));

return get$('##foo!foo.foo/foo');

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by mflorida on February 12, 2015