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

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

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

修改： 两个函数之间的差异不是由innerText函数与innerHTML相比的缓慢造成的，这是肯定的（我尝试删除div.innerHTML =""并且性能得到提升），这里发生了奇怪的浏览器重排。

Answer 1

作为MDN explains：

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

使用textContent代替innerText不会导致重排，也很快。 IE9 +也像FFX / Chrome一样支持它。

Answer 2

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

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

2 个答案: