Selecting first child - plugin perfomance

Selecting first child - plugin perfomance

In an answer to a  Stack Overflow question I enumerated all the ways I knew to get the "first children" of a jQuery object.

I had originally suggested that .children().first() wouldn't be very efficient because it requires jQuery to first build the list of all children, and then create a new jQuery object that only contains the first element.

So I wrote a plugin which uses .firstElementChild if available or iterates over the children directly otherwise.  In the former case the plugin effectively becomes:

  1. $.fn.firstChild = function() {
  2.       return {
  3.             return this.firstElementChild;
  4.       });
  5. };

Curiously, I've  found via jsperf that on Chrome 25 this is actually slightly slower than .children().first() although it's 50% - 130% faster in Firefox and Safari.

The real question is why is $(body).firstChild() from my plugin still 15x slower than just $(body.firstElementChild)?   The latter is incredibly fast, but not portable.  What is it about the chaining here that completely kills the performance?