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

Question

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

为什么最小化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

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

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