Question

这主要是一个性能问题，因为我有时会在开发人员的示例中看到它执行JavaScript。

对于更严格的语言（如C或Java），条件对于防止执行需要 not null 数据的函数非常重要。通常，检查空值有助于防止程序的某些部分执行，从而最大限度地减少内存消耗（我知道这是一个浅薄的解释）。

但是当谈到JavaScript时，错误通常不会阻止脚本的其余部分执行。现在，在jQuery的情况下，初始化元素上的DOM行为需要CSS选择器返回至少一个结果。但如果没有结果，则不会抛出任何错误。

我的问题是：在考虑这两个例子时，浏览器中是否存在任何性能或内存消耗差异：

案例1： 在执行jQuery库函数之前检查DOM。

var carousel = $('[data-carousel]');
if( carousel.length > 0) {
    carousel.slick({
        adaptiveHeight: true,
        lazyLoad: 'progressive'
    });
}

案例2： 执行jQuery库函数，而不先检查是否存在所需的选择。

$('[data-carousel]').slick({
    adaptiveHeight: true,
    lazyLoad: 'progressive'
});

编辑我想在此概述一些假设，看看这是否会对如何回答这个问题产生任何值得注意的差异：

执行前不知道所需DOM元素的存在。
整个网站的每个页面都可能有一个或多个轮播（约为0-3）。
每个DOM元素都有其他data属性，我检查并执行轮播行为更改（例如data-carousel-autoplay修改并刷新在该DOM元素上初始化的轮播。

非常感谢JavaScript和其他语言之间的比较！

Answer 1

单个选择器对jQuery的两次调用比一个更糟糕。

var carousel = $("[data-carousel]");
if (carousel.length) {
  carousel.slick({
    adaptiveHeight: true,
    lazyLoad: 'progressive'
  });
}

当然，您可以通过将JavaScript代码放在<body>的末尾或者使用“ready”处理程序将工作推迟到DOM准备就绪的位置：

$(function() {
  $("[data-carousel]").slick({
    adaptiveHeight: true,
    lazyLoad: 'progressive'
  });
});

为选择器抓取jQuery对象然后测试自己以查看length是否为非零，或者让其他jQuery方法中的隐式迭代执行此操作之间没有什么区别。可能存在一些的差异，但我们可能只谈了几微秒，而且不太重要。

在DOM中查找内容后缓存jQuery对象而不是多次重复它之间的区别是一个更重要的性能考虑因素。 jQuery中没有内在的缓存。

Answer 2

在对其进行测试之前测试它是否存在将在性能上有一个非常小的差异，一个足够小，你不应该用它来决定采取哪个路径，你应该使用更干净和/或更容易阅读的/维护。

正确编写的jQuery插件和方法（getter和过滤器除外）如下所示：

$.fn.theModule = function () {
  return this.each(function () {
    ...
  })
}

因此，如果没有选择元素，它只返回this，因为每个元素都不会迭代。显然，是的，这将产生一个小的（不明显的）性能影响，因为它运行的代码多于简单地检查数组的长度，但这不会以任何明显的方式影响您的用户或UI性能。

这一切都假设您只选择一次元素，例如@ Pointy的第一个片段。选择两次显然会变慢，甚至可能在大doms上显而易见。

与jQuery初始化之前的条件DOM检查有关的性能？

2 个答案: