在jQuery初始化之前进行条件DOM检查的性能

Performance as it pertains to conditional DOM check before jQuery initialization?

本文关键字：DOM 条件 检查 性能 jQuery 初始化      更新时间：2023-09-26

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

当涉及到更严格的语言，如C或Java时，条件对于防止执行需要非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'
});

EDIT我想在这里概述几个假设，看看这是否会对如何回答这个问题产生显著的差异:

  1. 在执行之前不知道所需DOM元素的存在。
  2. 整个网站的每个页面都可以有一个或多个轮播(大约0-3)。
  3. 每个DOM元素都有额外的data属性，我检查并执行旋转木马行为更改(例如data-carousel-autoplay修改并刷新在该DOM元素上初始化的旋转木马)。

比较JavaScript和其他语言非常赞赏!

为一个选择器调用两次jQuery比调用一次更糟糕。

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

当然你可以把工作推迟到DOM准备好了，要么把JavaScript代码放在<body>的末尾，要么使用"ready"处理程序:

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

为选择器抓取一个jQuery对象，然后自己测试length是否非零，或者让其他一些jQuery方法中的隐式迭代来做这件事，这两者之间没有真正的区别。可能会有一些差异，但我们可能谈论的是几个微秒，这几乎不可能有什么影响。

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

在对其进行操作之前测试它是否存在将会在性能上产生非常小的差异，小到您不应该使用它来决定采用哪条路径，而应该使用更干净和/或更易于阅读/维护的路径。

正确编写的jQuery插件和方法(getter和过滤器除外)如下所示:

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

所以，如果没有选择元素，它只是返回this，因为没有任何东西可供每个元素迭代。显然，这将有一个小的(不明显的)性能影响，因为它运行更多的代码比简单地检查数组的长度，但这不会以任何明显的方式影响你的用户或你的UI性能。

这些都假设您只选择了一次元素，比如@Pointy的第一个代码片段。选择两次显然会变慢，甚至可能在大的dom上以明显的方式。

相关文章：