为什么设置textContent导致布局颠簸？

Question

这篇博客文章表明,这对于避免布局颠簸textContent更为可取innerText.但它专注于检索元素的文本; 对于设置元素文本,相反的情况似乎是正确的 - 至少在以下示例中.

此示例使用innerText并不生成布局颠簸:

<style>
    #test {
        background-color: blue;
        float: right;
        width: 100px;
        height: 100%;
    }
</style>
Test test test
<div id="test"></div>
<script>
    setInterval(function() {
        document.querySelector('#test').innerText = 'innerText';
    }, 100);
</script>

但替换innerText用textContent,看着它鞭笞:

有人可以解释这种行为吗？我可以做些什么来避免布局颠簸并仍然以基于标准的方式更改元素的文本？

Answer 1

问题:

你是对的!就像你观察到的一样.设置textContent会导致颠簸.

以下是DOM规范所说的内容:

在DOM Level 3中引入的DOMString类型的textContent

此属性返回此节点及其后代的文本内容.如果将其定义为null,则将其设置为无效.在设置时,将删除此节点可能具有的任何子节点,如果新字符串不为空或为null,则替换为包含此属性设置为的字符串的单个Text节点.

修复

一种非颠簸的方式是获取元素的文本节点并修改它们而不是使用textContent或innerText(这是非标准的).

var test = document.getElementById("test");
var a = document.createTextNode("");
test.appendChild(a);
setInterval(function(){
    a.nodeValue = "Test test test";
},100);

这是一个工作小提琴

当然,如果实际文本会发生变化,则必须进行绘制以更新您所看到的内容.