加速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("_"); 
}