加速DOM访问，同时使用$ element.each（）

Question

我想在我的沉重的JavaScript UI应用程序中做出一些严重的延迟削减。 我已经读了如何优化代码，并从我学到了一些东西，我的理解是：

1. $（元素）。每个（）使事情变得更慢
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

但我还能做什么呢？

几件事情：

1. 是绝对没有指向您的if声明（除非它有您还没有表现出一个else条款），因为一个空的jQuery对象上调用.each是一个没有-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：如果我使用纯JavaScript

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

Answer 2

你正在使用jQuery，它在后面执行了很多代码。最快的方式是原生Javascript。

真正的小优化是从this得到id。您也可以使用这个（纯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("_"); 
}