Geek Answers Handbook

Is it possible to cache $ (window) and $ (document) in jQuery?

I recently read some articles on jQuery performance, and I came up with some weird questions.

  • Can / need to cache $(window) ?

    If I did, it would affect resize , scroll , width , scrollTop ... etc.

  • Can / need to cache $(document) ?

    As we use a lot of mouse actions, should I do var doc = $(document); ?

  • Is it possible to always cache $(this) in a large block of code?

    Regarding var self = $(this); , in what condition can self differ from $(this) ?

+6
source share
3 answers

All three questions: Yes. You can!

Neccessery: no

Better Performance: Possible

You can try and do a test. But the reason for caching is not looking for the whole DOM for your selector. Finding a document and a window is not a problem because they are two root variables. $ Caching (this) is situation-specific. See my second review.

Always cache the parent on which the queries are executed:

 var header = $('#header'); var menu = header.find('.menu'); // or var menu = $('.menu', header);

Better to bind jQuery methods than cache selectors:

 $('li.menu-item').click(function () {alert('test click');}) .css('display', 'block') .css('color', 'red') fadeTo(2, 0.7);

The cache items you frequently request are:

 var header = $('#header'); var divs = header.find('div'); var forms = header.find('form');

Free Extra Tip:

Selectors are compressed to the slowest:

 Id > Tag > classes
+9
source

  • Yes, you can cache $ (window), and that helps in performance.
    Someone has already passed the test in jsperf. http://jsperf.com/jquery-window-cache

    The test result is a bit spoiled, but you can still “run the test” on your browser to see the difference.

  • Yes, you can cache $ (document). I don't use $ (document) a lot, but based on the test I did in jsperf ( http://jsperf.com/document-vs-cache ), caching $ (document) does help for performance a bit too.

  • And yes, you can cache $ (this). But this one is different from other cahces. As you already know, the value of $ (this) will change the dependency is different. For example, if you use $ (this) for a mouse listener like this ....

     $(".button").on("click",function(){ var $this = $(this); });

    $ (this) will change when the user clicks on the button with the class "button", and $ ("this") becomes the object that the user clicked.

    Caching $ (this) can help in performance if you use $ (this) a lot inside the function. But remember that if you cache $ (this) inside a function, the cache will become a local variable, not a global one, and will be destroyed at the end of the function. Therefore, you cannot use it outside the function.

+2
source

Actual question: Can I cache $(window) and $(document) in jQuery?

If you want to cache a window or document for later use in a single session, yes you can.

All variables / functions that you created will be garbage collected if the user closes the window / session.

0
source

More articles:


All Articles