javascript – 为什么设置textContent会导致布局颠簸?

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>

但是用textContent替换innerText并观察它:

有人可以解释这个行为吗?我可以做些什么来避免布局颠簸,还要以基于标准的方式改变元素的文本?

问题:

你是对的!就像你观察到的。设置textContent确实会导致thrashing。

这是DOM specification所说的:

textContent of type DOMString, introduced in DOM Level 3

This attribute returns the text content of this node and its descendants. When it is defined to be null, setting it has no effect. On setting, any possible children this node may have are removed and, if it the new string is not empty or null, replaced by a single Text node containing the string this attribute is set to.

修复

一个非捶打的方式是获取元素的文本节点并修改它们,而不是使用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

当然,如果实际的文字会发生变化,就需要进行绘画来更新你所看到的内容。

http://stackoverflow.com/questions/17199958/why-does-setting-textcontent-cause-layout-thrashing

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:javascript – 为什么设置textContent会导致布局颠簸?