爲什麼用innerText代替InnerHTML導致> 15X性能下降

Question

這個問題來自我以前的帖子why a tiny reordering of DOM Read/Write operations causes a huge performance difference。

考慮下面的代碼：

function clearHTML(divs) { 
    Array.prototype.forEach.call(divs, function (div) { 
     contents.push(div.innerHTML); 
     div.innerHTML = ""; 
    }); 
} 

function clearText(divs) { 
    Array.prototype.forEach.call(divs, function (div) { 
     contents.push(div.innerText); //innerText in place of innerHTML 
     div.innerHTML = ""; 
    }); 
} 

http://jsfiddle.net/pindexis/ZZrYK/

我的測試結果對於n = 100：
ClearHTML：〜1ms的
明文：〜15ms的

爲n = 1000：
ClearHTML：〜4ms的
明文：〜1000毫秒

我測試了谷歌Chrome和IE瀏覽器，並得到了類似的結果代碼（Firefox不支持innerText屬性）。

編輯： 兩個函數之間的差別不是由的innerText功能的緩慢相比的innerHTML造成的，這是肯定的（我嘗試刪除div.innerHTML =""並得到了在性能提升），有奇怪的瀏覽器迴流發生在這裏。

Answer 1

由於MDN explains：

由於的innerText知道CSS樣式的，它會觸發迴流，而的textContent不會。

使用textContent而不是innerText不會導致迴流並且速度也很快。 IE9 +也支持FFX/Chrome。

Answer 2

差異幾乎肯定來自獲得InnerText所花費的額外努力（我相信這會消除無關標記並僅返回元素內的文本）。另一方面，InnerHTML只是返回瀏覽器已經解析和理解的數據。