易混性能差

Question

這是比較的innerHTML /的textContent性能，在現有的以及關於新創建的style元件的測試：http://jsperf.com/innerhtml-vs-textcontent/3

結果暗示：

• innerHTML和textContent在每個測試的瀏覽器上執行完全相同的新創建的style節點
• 在現有的style節點上，它們在Safari和Opera中執行完全相同，但是innerHTML是快於Firefox和Chrome
• 與新創建的一個更換style節點是不是覆蓋它在Firefox和Chrome在Opera textContent，慢，在Safari沒有區別更快。

雖然這並不奇怪，瀏覽器性能的不同，我覺得在大膽部分相當驚人。

那麼，innerHTML怎麼會比textContent更快，以及爲什麼要替換某個節點比替換它的內容更快？

Answer 1

檢查： innerHTML, innerText, textContent, html() and text()?

InnerHTML將返回所有內容元素的內部，而textContent基本上是試圖解析內容（擺脫標籤），當您訪問的元素。我猜想第一點的原因是，Google和Mozilla使用指針而不是堆obj作爲參考對innerHTML進行了一些優化，這就是爲什麼它更快（指針分配vs obj操作）的原因。我假設FF/Chrome比其他瀏覽器的innerHTML標記具有更好的性能。

似乎textContent試圖訪問它的子節點，每次訪問它時。

對於第二部分，從您提供的代碼中，js在調用textContent之前刪除了子節點。正如我所說textContent正在嘗試訪問其子節點並在調用時解析它們，如果它檢測到沒有附加子節點，它會更快。