Why is jQuery selector function so slow compared to native DOM methods

Question

I know this topic has been debated in general several times already, but I am looking for a more technical and detailed insight to understand what is really going on.

<

Answer 1

There is nothing that jQuery can do as fast as native javascript and that is for a reason: it works hard to make your code cross-browser compliant and easy-to-use. It builds a jQuery object out of most method calls. In that matter, jQuery will be a lot slower than the smallest datapath required because it wants to offer features that are ready to use.

Let's compare these two "similar" calls:

document.getElementById("box"): Native method that does a simple lookup operation at a lower level than JavaScript. It then returns the DOM element that is already loaded in memory. This is one of the fastest methods.

$('#box'): Here, jQuery will begin with some parsing over what you ask it to do. For example, it will validate that it is a well-formed selector, then try to recognize what type of selector it is. Once it's done with the validation, it will try to get the element with ID "box". After then, he will create a new jQuery object, filling it with every expected attribute and making sure that all the browsers (and older browsers too) are getting the same results. This includes a lot of fallbacks and compliance tests. When the object is ready-to-use, you get the element with ID "box". Not as straightforward as getElementById(). When jQuery features aren't required on the targeted element, many would prefer to use getElementById('box') instead of $('#box').

---

UPDATE - 15/02/17:

With jQuery >= 2.0 having no more support for the infamous IE 6/7/8, some compatibility tests aren't needed anymore, making jQuery lighter and faster. Overall performance can be improved by using jQuery >= 2.0 instead of 1.x if you don't need to support older browsers.

Answer 2

This is the amount of code jquery goes through when we use a simple $('selector')

http://james.padolsey.com/jquery/#v=1.10.2&fn=init

As you can see,there are plenty of validation done,regex matches,cross browser tricks etc.

Its important to realise that jquery is a library built on javascript.Javascript executes directly on the browser.Where as jquery processes quite a lot of javascript code before being executed by the browser.

I personally prefer jquery.I am really not bothered about saving those nano seconds.The level of simplicity that jquery provides is phenomenal and an artpiece in itself.

Answer 3

I've added another test case for jQuery.fn.init(document.getElementById('id')) which was faster than most other methods because it does neither parse string nor create new jQuery object (it was about 50% behind getElementById, jsperf), and when I see the source of jquery code that executes during jQuery.fn.init call:

function (selector, context, rootjQuery){
  if (selector.nodeType) {
          this.context = this[0] = selector;
          this.length = 1;
          return this;
  }
}

I can only conclude that Chrome and Firefox engineers did very good job at optimizing native DOM operations.