What is the cost of ‘$(this)’?

by

In the jQuery tag info this warning appears:

The jQuery function $() is expensive. Calling it repeatedly is extremely inefficient.

Well… that is true only for string selectors, which get parsed with regex to find out what they are:

quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/

Then if the string is a selector (other than id), jQuery traverses the DOM to find a match with its expensive find function:

} else if ( !context || context.jquery ) {
    return ( context || rootjQuery ).find( selector );
}

So yes it’s expensive, but that is only true for selectors!

If we pass a DOMElement, the only action jQuery does is saving the DOMElement parameter as the context of the newly created jQuery object and setting the length of the context to 1:

// Handle $(DOMElement)
if ( selector.nodeType ) {
    this.context = this[0] = selector; // Selector here is a DOMElement
    this.length = 1;
    return this;
}

I did some tests with jsPerf, and I found that indeed caching the jQuery object has only a little effect:

Bar chart, described below

In Chrome it’s only 7% slower. (In IE it’s a little bit more significant: 12%.)

More Related Contents:

  1. jQuery: load pages with ajax, caching, clean URLs and back button support
  2. When to use Vanilla JavaScript vs. jQuery?
  3. Good ways to improve jQuery selector performance?
  4. How to stop intense Javascript loop from freezing the browser
  5. Microsoft CDN for jQuery or Google CDN? [closed]
  6. Why cache jQuery objects?
  7. Best way to execute js only on specific page
  8. One big javascript file or multiple smaller files? [duplicate]
  9. How do I use Browserify with external dependencies?
  10. Sort a table fast by its first column with Javascript or jQuery
  11. Javascript (jQuery) performance measurement and best practices (not load time)
  12. How to dectect objects' overlaping situations in javascirpt? [closed]
  13. Cross-browser window resize event – JavaScript / jQuery
  14. jQuery ajax success callback function definition
  15. Check if event exists on element [duplicate]
  16. Remove everything after a certain character
  17. How to uncheck checked radio button [duplicate]
  18. How to Compare two Arrays are Equal using Javascript? [duplicate]
  19. What are techniques to get around the IE file download security rules?
  20. javascript: detect scroll end
  21. Get the DOM path of the clicked
  22. jquery: unload or beforeunload?
  23. Open infoWindows from an external link outside of the google map
  24. Sorting of jqGrid (v4.1.2) treegrid not working with Ajacency Model
  25. Chain ajax and execute it in sequence. Jquery Deferred
  26. How do I make an area unclickable with CSS?
  27. ToggleClass animate jQuery?
  28. Javascript – Leading zero to a number converting the number to some different number. not getting why this happening?
  29. Running javascript after page is fully rendered
  30. JQuery Modal Boxes and Iframe

Leave a Comment