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

why does replacing InnerHTML with innerText causes >15X drop in performance

本文关键字：性能 InnerText 替换 InnerHTML 为什么      更新时间：2023-09-26

这个问题源于我之前的帖子，为什么 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：
清除网页： ~1ms
明文：~15ms

对于 n=1000：
清除HTML ： ~4ms
明文：~1000ms

我在谷歌浏览器和IE上测试了代码，得到了类似的结果(Firefox不支持innerText(。

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

正如 MDN 解释的那样：

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

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

几乎可以肯定，区别来自于获取 InnerText 所需的额外努力(我相信它删除了多余的标签并只返回元素中的文本(。另一方面，InnerHTML只是返回已经被浏览器解析和理解的数据。

相关文章：