Question

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

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

我惊呆了，看到我准备的测试结果。我一直认为最小化创建$ instance的速度较慢。

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

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

vs

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

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

我想了解原因？

Answer 1

我认为find（）调用会降低速度。

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

Answer 2

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

document.getElementsByClassName("classvalue")

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

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

Answer 3

您需要考虑您的测试包含少于10个div或其他html元素。在第一个示例中编写代码的原因是为了使选择器更快，但是需要额外的方法调用。 Normaly到目前为止，选择器应该是两者中更昂贵的，所以增益会超过损失但是使用DOM这个小的选择器将是非常便宜的，无论你怎么写它。

人们常常不记得更复杂和更大的DOM会改变代码的瓶颈。我认为jsperf应该对此有一些警告。