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

这个问题源于我以前的帖子

考虑以下代码：

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 = "";
    });
}

我对n=100的测试结果：
ClearHTML:~1ms
明文：~15ms

对于n=1000：
ClearHTML:~4ms
明文：~1000ms

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

编辑：

---

这两个函数之间的差异并不是因为innerText函数比innerHTML慢，这是肯定的（我尝试删除了

div.innerHTML=“”

，并提高了性能），这里出现了奇怪的浏览器回流。

几乎可以肯定的是，不同之处在于获取InnerText所需的额外努力（我相信这会删除无关的标记，并仅返回元素中的文本）。另一方面，InnerHTML只返回已经被浏览器解析和理解的数据。

由于innerText知道CSS样式，它将触发回流，而textContent不会

---

使用

textContent

而不是

innerText

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

必须解释其中的html标记，并只返回可见文本。另一个只是吐出原始HTML。Firefox的等价物是

textContent

。尝试使用

textContent

属性。它比所有那些新式浏览器支持的

innerText

都要快。@JamesMontagne:文档的内存形式几乎肯定更接近DOM表示它的方式：作为节点树，经过预处理，文本节点基本上是原始字符。（无论何时通过DOM插入元素都插入HTML没有多大意义，而且速度可能非常慢。）

innerHTML

与

innerText

一样遍历该树，但它还必须重建HTML标记等。

innerText

可以简单地跳过为这些节点生成标记，而不是生成它们并试图在事后将其删除。这应该意味着更少的工作。