9

我开始了一系列关于 javascript / jQuery 优化的帖子，并偶然发现了这个有趣的结果。

为什么最小化 jQuery 对象（通过从缓存的 jQuery 集合中搜索）比创建更多 jQuery 对象实例要慢？

看到自己准备的测试结果，我惊呆了。我一直认为最小化创建 $ 实例会更慢。

这是我习惯写的，因为我缓存了父级（我称之为“appRoot”）。

var appRoot = $("#appRoot");
    appRoot.find(".element1").css("color","red");
    appRoot.find(".element2").css("color","blue");

对比

    $(".element1").css("color","red");
    $(".element2").css("color","blue");

查看测试结果（略有不同的场景）。 jsperf minimize-jquery-object-creation事实证明，缓存的片段比未缓存的片段慢。

我试图理解为什么？

4

3 回答 3

3

我认为 find() 调用是减慢速度的原因。

缓存 jQuery 对象的唯一原因是您要多次引用或操作它。如果您只是设置一个 CSS 属性，并且该属性在呈现页面的整个生命周期内都不会更改，那么没有理由定义缓存变量。

于 2011-07-12T20:28:53.113 回答
2

我想是因为在“创建更多jquery对象”中，jQuery可以直接使用最近的API

document.getElementsByClassName("classvalue")

在“less jquery”的另一种情况下，您必须始终验证找到的元素是否在 #appRoot 下，这需要更多时间。

这是另一个使用文档作为 appRoot 的测试，它似乎在第二次运行时稍微缩小了差距：http: //jsperf.com/minimize-jquery-object-creation/6

于 2011-07-12T20:36:28.697 回答
2

您需要考虑您的测试包含少于 10 个 div 或其他 html 元素。编写第一个示例中的代码的原因是为了使选择器更快，但需要额外的方法调用。通常，选择器应该是两者中较昂贵的，因此收益会超过损失，但是对于如此小的 DOM，无论您如何编写，选择器都会非常便宜。

人们经常犯错误，没有记住更复杂和更大的 DOM 会改变代码的瓶颈。我认为 jsperf 应该对此有某种警告。

于 2011-07-12T20:43:34.763 回答