Why cache jQuery objects?

by

Because the jQuery function has a lot of code in it, which involves unnecessary overhead if you execute it more than once with the same inputs expecting the same outputs. By caching the result, you store a reference to the exact element or set of elements you’re looking for so you don’t have to search the entire DOM again (even if it’s a fairly fast search). In many cases (simple pages with small amounts of code) you won’t notice a difference, but in the cases where you do it can become a big difference.

You can see this in action by testing your example in jsPerf.

You can also think of it as an example of the Introduce Explaining Variable refactoring pattern for readability purposes, particularly with more complex examples than the one in the question.

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. Is Safari on iOS 6 caching $.ajax results?
  4. How do you cache an image in Javascript
  5. Good ways to improve jQuery selector performance?
  6. Caching a jquery ajax response in javascript/browser
  7. How to stop intense Javascript loop from freezing the browser
  8. What is the cost of ‘$(this)’?
  9. Does using $this instead of $(this) provide a performance enhancement?
  10. Microsoft CDN for jQuery or Google CDN? [closed]
  11. Best way to execute js only on specific page
  12. Better way to prevent browser caching of JavaScript files
  13. One big javascript file or multiple smaller files? [duplicate]
  14. How do I use Browserify with external dependencies?
  15. Post-loading : check if an image is in the browser cache
  16. Sort a table fast by its first column with Javascript or jQuery
  17. Javascript (jQuery) performance measurement and best practices (not load time)
  18. $(document).ready equivalent without jQuery
  19. Persist variables between page loads
  20. Listening for variable changes in JavaScript
  21. JS replace not working on string [duplicate]
  22. What is the difference between setTimeout(fn, 0) and setTimeout(fn, 1)?
  23. javascript – How to make this code work? [duplicate]
  24. Userscript to wait for page to load before executing code techniques?
  25. How to pass javascript object from one page to other
  26. jQuery – Create hidden form element on the fly
  27. jQuery: checking if the value of a field is null (empty)
  28. How do you handle a form change in jQuery?
  29. lodash debounce not working in anonymous function
  30. Jquery change text between two elements

Leave a Comment