8

我最近阅读了一些关于 jQuery 性能的文章，并提出了一些奇怪的问题。

  • 我可以/应该缓存$(window)吗？

    如果我这样做了，它会影响resize, scroll, width, scrollTop...等吗？

  • 我可以/应该缓存$(document)吗？

    由于我们使用了很多鼠标操作，我应该这样做var doc = $(document);吗？

  • 我可以一直缓存$(this)在一大块代码中吗？

    至于var self = $(this);，在什么情况下self可能会有所不同$(this)？

4

3 回答 3

9

所有三个问题：是的，你可以！

必需品： 没有

更好的表现：也许

你可以尝试做一个基准测试。但是缓存的原因并不是要在整个 DOM 中搜索您的选择器。查找文档和窗口不是问题，因为它们是 2 个根变量。缓存 $(this) 取决于情况。请参阅我的第二个提示。

始终缓存您对其运行查询的父对象：

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

链接 jQuery 方法比缓存选择器更好：

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

缓存您经常查询的元素：

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

免费的额外性能提示：

选择器从快到慢：

Id > Tag > classes
于 2013-02-12T16:22:46.833 回答
3

  1. 是的，您可以缓存 $(window)，它确实有助于提高性能。
    有人已经在 jsperf 中做过测试。 http://jsperf.com/jquery-window-cache

    测试结果有点乱，但您仍然可以在浏览器上“运行测试”以查看差异。

  2. 是的，您也可以缓存 $(document) 。我很少使用 $(document)，但是根据我在 jsperf ( http://jsperf.com/document-vs-cache ) 中所做的测试，缓存 $(document) 对性能也有一些帮助。

  3. 是的，您可以缓存 $(this)。但这一个与其他 cahces 不同。如您所知，$(this) 的值会根据不同的情况而变化。例如，如果您在这样的鼠标侦听器中使用 $(this) ......

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

    $(this) 将在用户单击具有“button”类的按钮时发生变化，并且 $("this") 将成为用户单击的对象。

    如果在函数中大量使用 $(this)，缓存 $(this) 有助于提高性能。但是请记住，如果您在函数内部缓存 $(this)，缓存将成为局部变量而不是全局变量，并在函数结束时被销毁。所以你不能在函数之外使用它。

于 2014-07-21T22:06:48.613 回答
0

实际问题是，Can I cache $(window) and $(document) in jQuery?

如果您想缓存窗口或文档以便在同一会话中进一步使用，是的，您可以。

如果用户关闭窗口/会话，您创建的所有变量/函数都将被垃圾收集。

于 2016-07-29T10:18:32.137 回答