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

Question

This blog post建议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 specification所说的内容：

  在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);

Here is a working fiddle

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

Answer 2

除了Benjamin answer之外，我注意到当nodeValue或innerText的值与前一个值不同时，整个文档布局也会被删除，正如您在此处所看到的：http://jsfiddle.net/5N7Rr/15/

（全屏，在新标签页中打开）

浏览器会破坏整个布局，因为他不知道元素的大小，因此避免整个文档废弃的诀窍是设置固定的height和width AND设置{ {1}}至overflow（重要）。通过这种方式，您可以告诉浏览器，无论元素的内容是什么，它都不会退出元素边界。

小提琴：http://jsfiddle.net/5N7Rr/16/

并证明（再次全屏）。请注意布局更新如何仅影响元素：