在jQuery中訪問DOM元素的最有效方法是什麼？

我正在寫一個jQuery插件，我處於優化階段。在jQuery中訪問DOM元素的最有效方法是什麼？

我不知道這些導致總體更快的腳本，和什麼樣的緩解因素很重要：

有劇本在開始產生大量的類和ID，以便發現在DOM元素稍後更容易（也更快？）。
把類和id保持在最小值（這樣可以節省時間，而不是創建它們），但隨後會以更復雜的方式查找元素（例如對象中的第n個元素），我認爲這比通過id /類。

來源

2009-05-18 wheresrhys

的問題是不是真的不夠具體，所以我可以給你的建議對您的代碼直接相關的，但這裏有一些我最喜歡的jQuery的優化建議：

只要有可能，指定一個範圍內！不要讓jQuery看起來不必要的地方。如果你知道#container div內會有什麼東西，那麼做$(something, '#container');
.myclass是慢。在內部，jQuery必須通過每個單元元素來查看它是否有你正在搜索的類，至少對於那些不支持getElementsByClassName的瀏覽器。如果你知道一個類將只應用於某個元素，那麼的方式的做法會更快，因爲jQuery可以使用本地getElementsByTagName並只搜索那些元素。
不要在一個爆炸中做複雜的選擇器。當然，jQuery可以找出你想要的東西，但是解析出字符串並應用你想要的邏輯需要時間。因此，我總是喜歡將我的「查詢」分成多個補丁。雖然大多數人可能會做$('#myform input:eq(2)');或類似的事情，但我更喜歡做$('input','#myform').eq(2);來幫助jQuery。
如果您打算使用一組對象執行多項操作，則不要重新查詢DOM。以鏈接的優勢爲例，如果無法以任何理由使用鏈接，請將查詢結果緩存到變量中，然後對其執行調用。

來源

2009-05-18 18:54:35

偉大的提示 - 將馬上派上用場 – wheresrhys 2009-05-18 19:19:47

我認爲你回答了你自己的問題：'錯綜複雜的方式'是'它會破壞'的同義詞 - 任何對html結構的改變都會破壞你的代碼。

例如，假設你正在試圖獲得myDiv，你認爲它是child最後兄弟：

<div>parent 
    <div>child</div> 
    <div>myDiv</div> 
</div>

如果您稍後決定結構確實應該是這樣的，會發生什麼？

<div>parent 
    <div>child</div> 
    <div>myDiv</div> 
    <div>child</div> 
</div>

通過依賴關於結構的假設，您的代碼變得非常脆弱。向節點添加類和ID將防止出現這種情況。

我認爲你應該去的第一選擇。還要記住，按類獲取節點總是比通過id獲取節點慢。

來源

2009-05-18 18:38:23

偉大的點，複雜=脆 – 2010-10-21 18:23:59

用我的插件，盡我所能，儘量限制引入到文檔中的鉤子數量。「鉤」我的意思是ID或類。

完全避免它們的最好方法是保留對插件封閉內的任何創建元素的引用。例如：

jQuery.fn.addList = function(items, fn){ 
    var $list = $('<ul/>').html('<li>' + items.join('</li><li>') + '</li>'); 
    return this.each(function(){ 
     $(this).append($list); 
     fn.call($list); 
    }); 
}; 

$('body').addList(['item 1', 'item 2'], function(){ 
    var referenceToTheList = this; 
    console.log(referenceToTheList, '<- this is my list, no hooks involved!'); 
});

該列表可以圍繞JavaScript函數（參考和在多個地方使用的），而不需要在HTML任何鉤進行;從而使其儘可能不顯眼！

避免/限制掛鉤在插件開發中尤爲重要，因爲您永遠不知道它最終可能在哪裏使用。

來源

2009-05-18 18:52:36 James

瀏覽器的工作方式是，當負載它創建了一個內存中的DOM樹看起來如下：

           P 
           _______________|______________ 
           |        | 
          childNodes     attributes 
       ______________|___________     | 
       |    |   |   title = 'Test paragraph' 
     'Sample of text ' DIV 'in your document' 
           | 
          childNodes 
        __________|_______ 
        |   |  | 
      'HTML you might' B  'have'

所以，當你查找P > DIV > B，查找必須找到所有P元素，然後找到P內的所有DIV元素，然後在DIV內找到所有B元素。嵌套越深，就需要做更多的查找。此外，它可能會發現所有P > DIV只發現他們都沒有B，它將浪費時間查看所有P > DIV比賽。

ID查找的速度更快，因爲ID保證是唯一的，所以DOM可以將它們存儲爲具有非常快速查找的哈希表條目。就jQuery而言，實現可能稍有不同，但是，document.getElementById查找時間最快，因此$('#my_node_id')也應該相當快。

因此，如果您的節點沒有一個ID，你可以發現，確實在最近的祖先和你的節點相對找到相應的祖先

#my_node_id > div > b

因爲只查找需要的子下發生 - #my_node_id的樹會比p > div > b

更快

來源

2009-05-18 19:50:09 aleemb

單獨的踢屁股ASCII圖。 – 2009-05-18 23:51:08

在jQuery中訪問DOM元素的最有效方法是什麼？

回答

相關問題