javascript - 使用 $element.each() 加速 DOM 访问

Question

我正在尝试在我庞大的 javascript UI 应用程序中大幅减少延迟。 我一直在阅读优化代码的方法，从我学到的一些东西中，我了解到:

1. $(element).each() 使速度变慢
2. 应缓存变量(和 HTML 对象)

这是我的应用程序中经常运行的函数中现有代码的一部分:

if($('.textbox').length > 0)
{   $(".textbox").each(function(){
             var parts = $(this).attr('id').split('_');
             // do some linear-time operations here with $this
            });
     });

到目前为止，我知道我应该输入 $this = $(this)在.each()开头并且仅使用$(this) 。但我还能做什么呢？有没有更快的替代方法来使用 .each()？我确实需要查看每个 div与 .textbox类。

Answer 1

But what else can I do?

几件事:

1. 自从调用 .each 以来，您的 if 语句绝对没有任何意义(除非它有一个您未显示的 else 子句) 在一个空的 jQuery 对象上是一个空操作。删除它。

2. 如果你不想删除它，至少缓存 DOM 查找的结果，因为每次调用 $('.textbox') jQuery 都必须关闭并查询 DOM。

3. id 是 DOM 元素实例上的反射属性，因此 $(this).attr("id").split('_') 涉及使用 this.id.split('_') 可以避免多次函数调用和内存分配。

这给了我们:

$('.textbox').each(function() {
    var parts = this.id.split('_');
    // Do something with `parts`
});

或者，如果您还没有显示else:

var boxes = $('.textbox');
if (boxes.length) {
    boxes.each(function() {
        var part s= this.id.split('_');
        // ...
    });
}
else {
    // ...
}