HTML DOMs，ids vs no ids？

Question

只要你有數百個非常簡單的子元素的div容器，如以下幾點：

<div id="stuffContainer" class="item-container"> 
    <div class="single-item"></div> 
    <div class="single-item"></div> 
    <div class="single-item"></div> 
    <div class="single-item"></div> 
    <div class="single-item"></div> 
    <div class="single-item"></div> 
    [...] 
</div> 

請問，包括對任何（有意義）的方式各單個元素傷害（客戶端）性能的唯一的ID，無論是渲染，JavaScript或內存明智？

爲什麼我問：我可能需要不時地參考具體項目，我想知道我是否應該事先預先計算哪些項目需要選擇，給他們ID並離開剩下的，或者只是給所有人分配ID，這會使得這個過程更加直接，但我想知道這可能是一個矯枉過正的問題。

如果有人可以談論現代瀏覽器是如何處理這個問題的，並且爲什麼它在瀏覽器呈現和管理DOM方面不會產生什麼影響，那麼獎金點（如果我真的可以給他們的話）。

Answer 1

在最多的時候，我猜測瀏覽器做的幾件基本事情是在構建DOM結構時將ID作爲屬性分配給每個元素，並將ID存儲在散列表中以便於諸如#id選擇器，document.getElementById()和稍後的idref查找。我不認爲這會導致觀察到的性能或內存使用量出現輕微的下降，因爲散列表和DOM被設計爲非常優化。

也就是說，如果您的元素在所有上都不需要ID，那麼在分配ID時就沒有意義了。您最終會遇到很多標記膨脹問題。正如丹·戴維斯·布拉克特所言，將顯然會導致放緩，因爲它取決於客戶端連接。

如果您可以使用CSS選擇器引用這些元素，則始終可以使用:nth-child()來查找特定的子元素。如果您需要支持舊版瀏覽器，那麼總會有一個CSS2解決方案。看到這些問題：

• How can I get the second child using CSS?
• How do I get the nth child of an element using CSS2 selectors?

Answer 2

曾經有數以百計的時候是使用id屬性沒有顯著的性能下降，甚至。儘管手動選擇需要唯一標識的元素會稍微快一點，但我認爲，性能提升並不能證明這樣做需要額外的時間。

這就是說，我不確定id屬性甚至需要在這種情況下。如果你使用jQuery，您可以選擇第四個元素，例如，使用下面的代碼：

$('.single-item').eq(3); 

Answer 3

由於BoltClock意味着，回答最多的性能問題是「測量它！」。這就是說，你錯過了一個潛在的測量軸：下載大小。將ID屬性添加到超過必需的元素將增加字節權重，這不僅僅是因爲元素必須是唯一的（這意味着它們不會壓縮以及非唯一屬性）。

Answer 4

在這種情況下，在所有內容上使用id都會有點矯枉過正。我明白你來自哪裏，但是如果你使用jQuery這樣的語言，考慮到結構，選擇孩子會很容易。這裏是點擊了哪個div的之一，你怎麼可能知道的例子：

$('.single-item').click(function() 
{ 
    var yourClickedDiv = $(this); 
    // execute the rest of your code here 
}); 

這只是一個小例子，但正如你所看到的，您可以訪問每個任何你需要做的的div 。這將使html文件不會因爲過多的id標籤而變得混亂，同時保持文件的大小更小一些（更不用說爲了生成每一個唯一的ID而讓你頭疼了）。

Answer 5

原始Q對於內容/目的不是很具體，應該有變化，取決於IMO。我絕對不同意目前接受的答案。循環遍歷並將新ID附加到已經呈現的大量HTML中可能會導致大量的迴流計算，這可能會因'stuffContainer'表示的內容而變得很難看。

建立與標識首先從服務器或注入作爲一個塊上的客戶端如果必須

作爲一般規則，避免擊中的變化DOM反覆，如果你能避免它。就像瀏覽器加載頁面IMO一樣，事先在服務器上構建的ID幾乎可以忽略不計。當然，這是一個更大，因此速度更慢的哈希表，但如果我們談論的是數百個而不是數萬個，我真的懷疑你會注意到。

對於類似於根據數據構建的選擇列表的情況，更有效的客戶端方法是首先將其構建爲字符串，包含ID和全部，然後分配給容器的innerHTML，或者如果像某些我的js聊天的同事們，在每一個可能的用例中，你都會對innerHTML有一個奇怪的掛斷，儘管它現在已經在規範中了，至少在構建並附加到文檔片段之後。然後將其附加到您的容器中。

數據的屬性或類在標識

IMO，氣味因子是不是這麼多的性能，而是HTML膨脹並創建一個ID依賴於需要無，從而阻斷別的東西可能在您的單個項目div上找到自定義ID很有用。 ID絕對是縮小JavaScript元素查找範圍的理想方式，但在容器內容的情況下，您將比ID'd每個子項目獲得更多的靈活性。一步與二步的性能增益不值得將通用ID應用於元素的靈活性成本。

作爲替代，您可以使用具有唯一值或數據屬性的類，例如， '數據的itemId = 「0」'。對於像定製選擇列表那樣的較小的一組HTML，其ID與某些服務器端索引系統連接以便於更新數據，但我傾向於贊成這種高度可見的方法，因爲它可以更容易地理解架構，但它增加了很多在涉及數百到數千項目的場景中跟蹤不必要的屬性。

或理想（在大多數情況下），事件代表團

最理想，國際海事組織，你完全避免附加屬性在情況下，你只在乎你一下孩子單項元素，而不是什麼它的'ID'是或訂單這些單項貨物將保持靜態，並且您可以安全地假定這些頭寸是有效的ID。或者，這可能適用於非靜態單項集合的另一種情況是，如果您有一些對象數組中的單項數據被混洗，然後用於在用戶啓動的排序上構建和替換HTML，這些排序將始終將HTML的順序與其他數據跟蹤依賴關係聯繫起來。

非jQuery的方法（未經測試）：

var myContainer = document.getElementById('stuffContainer'); 
//ignore following indent goof 

    myContainer.addEventListener('click', function(e){ 
     var 
      singleItem, 
      elementOriginallyClicked = singleItem = e.target, 
      stuffContainer = this; 

     //anything clicked inside myContainer will trigger a click event on myContainer 
     //the original element clicked is e.target 
     //google 'event bubbling javascript' or 'event delegation javascript' for more info 

     //climb parentNodes until we get to a single-item node 
     //unless it's already single-item that was originally clicked 
     while(!singleItem.className.match(/[=\s'"]single-item[\s'"]/g)){ 
      singleItem = singleItem.parentNode; 
     } 

     //You now have a reference to the element you care about 

     //If you want the index: 

     //Get the singleItem's parent's childNodes collection and convert to array 
     //then use indexOf (MDN has normalizer for IE<=8) to get the index of the single-item 

     var childArray = Array.prototype.slice.apply(stuffContainer.childNodes,[0]), 
     thisIndex = childArray.indexOf(singleItem); 

     doSomethingWithIndex(thisIndex); 
     //or 
     //doSomethingWithDOMObject(singleItem); 

    }); 

或者簡單的jQuery代表團風格（也未經測試）：

$('#someContainer').on('click','.single-item', function(){ 
    var $_singleItem = $(this), //jq handles the bubble to the interesting node for you 
    thisIndex = $_singleItem.index(); //also getting index relative to parent 

    doSomethingWithIndex(thisIndex); 
    //or 
    //doSomethingWithJQObject($_thisItem); 
});