Javascript：GetElementById - 何時DOM命中？

我這樣做：Javascript：GetElementById - 何時DOM命中？

var hpl = doc.getElementById("hpl");

，然後這樣的：

hpl.style.height = 28 + "px";

我的問題：我在訪問DOM兩次，第一次引用的元素，然後第二次設置樣式高度？

如果是這樣，那麼我是否正確地斷定這對於DOM調用是低效的，儘管它很好地被最小化了。

var hpl = document.getElementById("hpl"); 
if (test === "Abel") { 
    hpl.style.height = 28 + "px"; 
} else { 
    hpl.style.height = 42 + "px"; 
}

所以這將是在速度方面更好：

if (test === "Abel") { 
    document.getElementById("hpl").style.height = 28 + "px"; 
} else { 
    document.getElementById("hpl").style.height = 42 + "px"; 
}

我有一個jsperf here這表明不存在真正的區別，但我想了解這背後的理論。謝謝。

來源

2012-09-23 Nick

計算機現在每天可以執行每秒數百萬次的「document.getElementById」函數。不要浪費你的時間。無論如何，DOM元素在調用後被緩存。 – gdoron

將'getElementById'保存在本地變量中並重復它之間的任何性能差異比保存到本地的更重要的是更清潔，更少的代碼。這裏使用局部變量 - 並不是因爲速度更快（儘管它非常小，並且獨立於瀏覽器可能實現或可能不實現的任何getElementById優化），但是因爲它讀得更好。（它也不太容易出錯 - 你不會輸入「hpl」兩次，輸入錯字的可能性更大，更不用說其他重複字符了。） –

謝謝大家。 – Nick

你這樣做的兩種不同方式與訪問DOM的觀點沒有什麼不同。

var hpl = doc.getElementById("hpl"); 
hpl.style.height = 28 + "px";

此認爲，具有id="hpl"，將其放入一個局部變量，然後將DOM元素使用本地變量直接引用的DOM元素（不需要搜索）來修改它。

當你做這種方式：

document.getElementById("hpl").style.height = 28 + "px";

唯一的區別是，你不把它保存在一個局部變量（儘管它內部存儲在JavaScript引擎）。它仍然通過查找具有id="hpl"的DOM元素來獲取DOM元素，然後使用該DOM元素的引用來直接設置樣式值。這與第一種方式沒有明顯的區別。

對DOM元素的存儲引用是訪問DOM元素的一種非常有效的方式。不需要搜索。在瀏覽器/ JavaScript引擎的內部，DOM引用是一種數據結構，它包含一種快速獲取實際DOM對象的方法（可能是指向它的指針，但實際的實現由瀏覽器決定）。

來源

2012-09-23 05:23:49 jfriend00

再次感謝您的幫助。順便說一句，像單例這樣的東西，它被認爲是好的或不好的形式來存儲引用作爲要通過多種方法或私有函數訪問的屬性/私有變量？ – Nick

@Nick - 是否將一個DOM引用存儲在一個私有變量中是一種折衷。如果您經常訪問它，那麼存儲它可以提高性能。但是，如果您的頁面是動態的（刪除和創建DOM元素），那麼如果在DOM元素更改後未更新，則存儲引用可能導致內存泄漏或錯誤的引用。沒有對錯，這取決於具體情況。 – jfriend00

乾杯。想想我是安全的，但是現在有意識地糾正內存泄漏。 – Nick

據我所知，一旦你通過Id訪問過DOM元素一次，它將被放入一個字典中以供後面的快速參考（如散列表/ hasmap）。

來源

2012-09-23 05:13:30 OneMore

這是一個質量實施決定。在任何規範中沒有要求'getElementById'具有任何特定的性能特徵，所以最好只執行一次。（對於這種情況，瀏覽器通常會進行內部優化，但是不應該根據它們進行不必要的操作。） –

Javascript：GetElementById - 何時DOM命中？

回答

相關問題