最小化 jQuery 实例与创建更多实例答案

【问题标题】：Minimizing jQuery instance vs creating more instances最小化 jQuery 实例与创建更多实例
【发布时间】：2011-07-12 20:22:03
【问题描述】：

我开始了一系列posts on javascript / jQuery optimization 并偶然发现了这个有趣的结果。

为什么最小化 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 原来缓存的 sn-p 比未缓存的 sn-p 慢。

我想知道为什么？

【问题讨论】：

【解决方案1】：

我认为 find() 调用会减慢速度。

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

【讨论】：

有趣的是，我们需要更改测试，知道如何深入了解这一点吗？
看来这是正确的。 .find() 过滤元素，检查子元素是否匹配选择器，而 $('.className') 使用原生 document.getElementsByClassName（如果存在）。
所以$(".element1",appRoot) 最快？
@adardesign 看起来是这样，是的。如果 sizzle 找到一个类并且传递了一个上下文，则使用 context.getElementsByClassName。
@adardesign: $(".element1",appRoot) 最终等同于 appRoot.find(".element1");

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

document.getElementsByClassName("classvalue")

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

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

【讨论】：

我想知道同样的事情，除了它可以使用 appRoot.getElementsByClassName("element1") 仍然使用该本机函数，但只返回 appRoot 的孩子。