javascript - 为什么用 innerText 替换 InnerHTML 会导致性能下降 15 倍以上

Question

这个问题来自我之前的帖子，为什么 DOM 读/写操作的微小重新排序会导致巨大的性能差异。

考虑以下代码：

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
ClearText：~15ms

对于 n=1000：
ClearHTML：~4ms
ClearText：~1000ms

我在 google chrome 和 IE 上测试了代码，得到了类似的结果（Firefox 不支持 innerText）。

编辑： 与innerHTML相比，这两个函数之间的差异不是由innerText函数的缓慢引起的，这是肯定的（我尝试删除div.innerHTML =""并提高了性能），这里发生了奇怪的浏览器重排。

Answer 1

正如MDN 解释的那样：

由于 innerText 知道 CSS 样式，它会触发重排，而 textContent 不会。

使用textContent代替innerText不会导致回流，而且速度也很快。IE9+ 也像 FFX/Chrome 一样支持它。

Answer 2

几乎可以肯定，差异来自获取 InnerText 所需的额外努力（我相信它会删除无关标签并仅返回元素内的文本）。另一方面，InnerHTML 只返回已经被浏览器解析和理解的数据。