做太多ids傷害性能

如果我在頁面上不必要的id s元素，就像HTML Helper在ASP.Net-MVC中做的那樣。
它是否會降低我的ID選擇器的性能？（我有一個元素的大寫金額巨大頁）做太多ids傷害性能

例子：

// 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>

來源

2012-02-08 gdoron

性能問題總是很棘手，因爲實現之間可能存在這種差異。一般來說，我會同意這裏的答案。我唯一要補充的是，一些瀏覽器，如Chrome和IE，使所有ID都能夠被ID作爲全局變量*（或全局對象上的屬性）引用的ID引起全局混亂。因此，如果您談論的數千個ID除了數字變體之外實際上是相同的，那麼可能需要重新考慮您的方法。否則，我不會過多地流汗。 :) – 2012-02-08 15:36:06

簡短的回答，沒有。

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

幾個月前，大約有低效率的CSS選擇器的性能影響的一些職位。我很好奇 - 這是我爲之而活的瀏覽器特質行爲。在進一步的調查中，我不太確定是否值得讓CSS選擇器更有效率。我會走得更遠，說我不認爲如果我們明天醒來，每個網頁的CSS選擇器被神奇優化人會注意到...

我修改了測試如下：

2000個錨和2000個規則（而不是20000個） - 這實際上導致了約6000個DOM元素，因爲所有嵌套在P，DIV，DIV，DIV

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

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

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

來源

2012-02-08 12:29:52

補充說明：除非您將JS事件綁定到所有選擇器，否則性能將最低 – 2012-02-08 12:30:47

選擇一個ID是非常快，因爲jQuery的備份到本地

document.getElementById

功能。儘管如此，你可以緩存你的選擇器，如果你經常使用它們（將它們保存在一個變量中）。

來源

2012-02-08 12:30:29 knub

答案是：不。由於速度如此之快，您不必擔心這一點。 – knub 2012-02-08 12:35:29

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

來源

2012-02-08 12:34:31 chiborg

選擇元素id在jQuery中是少數幾個選擇器之一，如果頁面上有很多元素，它們將不會收到性能命中。

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

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

來源

2012-02-12 07:34:04

做太多ids傷害性能

回答

相關問題