主页 / 问题 / 946621
Accepted
Roman Andreev
Asked:2020-02-19 17:38:10 +0000 UTC2020-02-19 17:38:10 +0000 UTC

哪个选择器在性能方面是最佳的？

  • 772

这些过程中哪一个是资源密集型的？

var content = $('.kb-content');
content.each(function () {
    if ($(this).data('parent-id') === targetId) {
        $(this).toggleClass('hidden');
    }
});

或者

$('.kb-content[data-parent-id="' + targetId +'"]').toggleClass('hidden');
javascript

1 个回答

  1. Best Answer

    jQuery 使用 Sizzle 库来选择元素。这个库解析传递的字符串，对于简单的情况，使用标准函数get*By*，或者，如果支持，使用querySelectorAll.

    我们可以考虑在第一种和第二种情况下究竟发生了什么。

    第一种情况：

    1. $('.kb-content');- 选择一个类的所有元素kb-content
    2. content.each(function () {- 通过每个元素
    3. if ($(this).data('parent-id') === targetId) {- 创建一个jQuery对象，访问data，比较一个参数
    4. $(this).toggleClass('hidden');- jQuery 对象创建、类更改

    第二种情况：

    1. $('.kb-content[data-parent-id="' + targetId +'"]')- 选择具有kb-content其属性的类的元素data-parent-id- 具有相应的值
    2. .toggleClass('hidden');- 遍历每个元素并更改类

    至少可以看出两个区别：

    1. 样品中不同数量的元素
    2. 没有附加条件。

    因此，如果在具有kb-content所需属性的一类元素的元素中，元素会少得多，那么按属性选择的选项会更快，因为这样的元素会更少。

    此外，速度受对象的多次创建影响jQuery。

    确认上述推理的测试示例。

    • 3

相关问题