太多的ID會影響性能嗎？

Question

如果我在頁面中有不必要的id元素，就像HTML Helper在ASP.Net-MVC 。
它會降低我的id選擇器的性能嗎？ （我有一個巨大的元素頁面）

例：

// First DOM   
<HTML>
...
    <input type="text" value="first" id="useless" />
    <input type="text" value="second" id="useful" />
</HTML>

// Second  DOM  
<HTML>
...
    <input type="text" value="first"/>
    <input type="text" value="second" id="useful" />
</HTML>

腳本：

<script>
    alert($('#useful').val());
    // never select the first element (with the useless id)
</script>

Answer 1

簡短的回答，沒有。

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

幾個月前，有一些關於低效CSS選擇器的性能影響的帖子。 我很感興趣 - 這是我生活的那種瀏覽器特質行為。 在進一步調查中，我不太確定是否值得花時間讓CSS選擇器更有效率。 我會更進一步地說，如果我們明天醒來並且每個網頁的CSS選擇器都被神奇地優化，我認為沒有人會注意到......

我修改了測試如下：

2000錨和2000規則（而不是20,000） - 這實際上導致~6,000個DOM元素，因為P，DIV，DIV，DIV中的所有嵌套

基線頁面和標簽選擇器頁面具有2000個規則，就像所有其他頁面一樣，但這些是與頁面中的任何類都不匹配的簡單類規則

我在12個瀏覽器上運行這些測試。 頁面渲染時間是使用頁面頂部和底部的腳本塊測量的。 （我從本地磁盤加載頁面以避免分塊編碼可能造成的影響。）...

基於這些測試，我有以下假設：對於大多數網站，優化CSS選擇器可能帶來的性能提升很小，並且不值得花費。 有一些類型的CSS規則和與JavaScript的交互可以使頁面明顯變慢。 這是重點應該是...

Answer 2

選擇一個id非常快，因為jQuery備份到本機

 document.getElementById

功能。 但是，如果經常使用它們，可以緩存選擇器（將它們保存在變量中）。

Answer 3

雖然JavaScript性能不會受到影響，但數千個ID會使您的HTML變大，從而增加了加載時間和流量成本。 它可能是微不足道的（壓縮圖像和其他資源更為重要），但可能仍然是優化的途徑。

Answer 4

如果頁面上有許多元素，那么在jQuery中按id選擇元素是少數幾個不會受到性能影響的選擇器之一。

另一方面，如果您基於類或屬性值選擇元素，則會看到顯着的性能影響。 如果您擔心性能，還要確保通過將選擇器存儲在變量中以便重用來緩存您的jquery選擇器。

var element = $("#specificElement");
console.log(element.val());

太多的ID會影響性能嗎？

問題描述

4 個解決方案

解決方案1
17 已采納 2012-02-08 12:29:52

解決方案2
5 2012-02-08 12:30:29

解決方案3
2 2012-02-08 12:34:31

解決方案4
1 2012-02-12 07:34:04

太多的ID會影響性能嗎？

問題描述

4 個解決方案

解決方案1 17 已采納 2012-02-08 12:29:52

解決方案2 5 2012-02-08 12:30:29

解決方案3 2 2012-02-08 12:34:31

解決方案4 1 2012-02-12 07:34:04

解決方案1
17 已采納 2012-02-08 12:29:52

解決方案2
5 2012-02-08 12:30:29

解決方案3
2 2012-02-08 12:34:31

解決方案4
1 2012-02-12 07:34:04