JAVASCRIPT DOM搜索或DOM關係，這是更快的方法？

假設我有以下的HTML結構JAVASCRIPT DOM搜索或DOM關係，這是更快的方法？

<div> 
    <div id="foo"></div> 
</div> 
<div> 
    <div id="bar"></div> 
</div>

現在我需要，當我點擊「富」的「吧」的innerHTML變成了「你好」。我基本上有兩種方式來獲得的「棒」的元素：

document.getElementById("foo").onclick=function(){ 
    document.getElementById("bar").innerHTML="hello"; 
} 

document.getElementById("foo").onclick=function(){ 
    this.parentNode.nextElementSibling.firstElementChild.innerHTML="hello"; 
}

兩種方法/屬性是本地DOM的一部分，但我不知道，如果是後者從1995年起的getElementById前者稍快應遍歷所有的ID文件直到第一場比賽達成？

來源

2014-09-03 Frank Dai

您可以自行剖析代碼：http://jsperf.com/，https://developer.chrome.com/devtools/docs/cpu-profiling – 2014-09-03 01:01:30

@弗蘭克戴，請考慮不僅更快，而且還維護該代碼。比方說，在未來，你想在它們之間放置一個簡單的圖像。然後，像「this.parentNode.nextElementSibling.firstElementChild.innerHTML」的東西將停止工作。 – 2014-09-03 01:05:27

是的。我知道要緩存，並且這種基於關係的代碼容易被未來修改。我的觀點是即使差距可能小於2-3毫秒，哪種方式更快。 – 2014-09-03 01:09:45

甚至更快，是緩存的元素在頁面加載時，爲將來查找：

var fooEl = document.getElementById("foo"); 
var barEl = document.getElementById("bar"); 

fooEl.onclick=function(){ 
    barEl.innerHTML="hello"; 
}

您應該緩存的任何查詢或計算：1）價格昂貴，2）永遠不會改變。並且你應該在頁面加載時做查找，以便查找不會發生在之後用戶已經做了一些操作，但查找發生在用戶什麼都不做的時候（在這段時間裏，用戶什麼都不做，它可以自由地對事物進行預加載和預緩存）。

來源

2014-09-03 01:01:43

在點擊處理程序中執行查找不會成爲任何方式的瓶頸。（當點擊像可樂的編碼器時，I max大約爲8次/秒）。考慮到通過ID獲取元素也是一種非常快速的操作（並且兩眼線性跟隨也不是昂貴的操作）。因爲如果DOM稍後被修改（即使特定的點擊綁定不可能），那麼「緩存」元素可能會有問題，但我不會這樣做，除非受到綁定（變量）的限制而增加了好處。代碼存在* no *性能問題，因此唯一關心的是清晰度/可維護性。 – user2864740 2014-09-03 01:10:56

JAVASCRIPT DOM搜索或DOM關係，這是更快的方法？

回答

相關問題