javascript – 性能,因为它与jQuery初始化之前的条件DOM检查有关？

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

当涉及到更严格的语言(如C或Java)时,条件对于防止执行不需要空数据的函数非常重要.通常,检查空值有助于防止程序的某些部分执行,从而最大限度地减少内存消耗(我知道这是一个浅薄的解释).

但是当谈到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-carousel-autoplay修改和刷新在该DOM元素上初始化的轮播.

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

解决方法:

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

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

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

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

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

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

javascript – 性能,因为它与jQuery初始化之前的条件DOM检查有关？

相关文章