为啥用 innerText 替换 InnerHTML 会导致性能下降 15 倍以上

Posted 2023-02-22

【中文标题】为啥用 innerText 替换 InnerHTML 会导致性能下降 15 倍以上

【英文标题】：why does replacing InnerHTML with innerText causes >15X drop in performance为什么用 innerText 替换 InnerHTML 会导致性能下降 15 倍以上

【发布时间】：2013-10-15 22:00:14

【问题描述】：

这个问题来自我之前的帖子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 明文：~1000ms

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

编辑： 这两个函数之间的差异并不是因为与 innerHTML 相比，innerText 函数的速度较慢，这是肯定的（我尝试删除 div.innerHTML ="" 并获得了性能提升），这里发生了奇怪的浏览器重排。

【问题讨论】：

必须解释其中的 html 标签并只返回可见文本。另一个只是吐出原始 HTML。

Firefox 的等价物是textContent。

尝试使用textContent 属性。它比innerText 快

所有那些新奇的浏览器都支持textContent。

@JamesMontagne：文档的内存形式几乎肯定更接近 DOM 的表示方式：作为节点树，经过预处理，文本节点基本上是原始字符。 （每当通过 DOM 插入元素时插入 HTML 没有多大意义，并且可能会非常缓慢。）innerHTML 与 innerText 一样遍历该树，但它还必须重建 HTML 标签等。 innerText 可以简单地跳过为这些节点生成标签，而不是生成它们并在事后尝试将它们剥离。这应该意味着更少工作。

【参考方案1】：

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

【参考方案2】：

作为MDN explains:

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

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