在使用$element.ech(）时加快DOM访问速度

speed up DOM access while using $element.each()

本文关键字：DOM 速度 访问 element ech      更新时间：2023-09-26

我正试图在我庞大的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（）？我确实需要用.textbox类签出每个div。

但我还能做什么呢？

几件事：

  1. 你的if语句绝对没有意义（除非它有一个你没有显示的else子句），因为在一个空的jQuery对象上调用.each是一个no-op。移除它。

  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 {
    // ...
}

您正在使用jQuery，它在后面执行许多代码。最快的方法是原生Javascript。

一个真正的小优化是从CCD_ 15中得到CCD_ 14。您也可以使用这个（Native JS）jQuery将执行许多功能）：

var parts = this.id.split('_');

例如
尽可能快地获取所有元素。您可以使用此函数按类名获取元素：

if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className)
    {
        var hasClassName = new RegExp("(?:^|''s)" + className + "(?:$|''s)");
        var allElements = document.getElementsByTagName("*");
        var results = [];
        var element;
        for (var i = 0; (element = allElements[i]) != null; i++) {
            var elementClass = element.className;
            if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                results.push(element);
        }
        return results;
    }
}

还有要循环的代码：

var elements = getElementsByClassName(".textbox");
for(var i=0;i<elements.length;i++)
{
    var splitid = elements[i].id.split("_");
}
相关文章：