Why does setting textContent cause layout thrashing?

Question

This blog post suggests that textContent is preferable to innerText for avoiding layout thrashing. But it is focused on retrieving an element's text; for setting element text, the opposite appears to be true -- at least in the following example.

This example uses innerText and produces no layout thrashing:

<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>

But replace innerText with textContent and watch it thrash:

Can someone explain this behavior? What can I do to avoid layout thrashing and still change an element's text in a standards-based way?

Answer 1

The issue:

You are correct! Just like you observed. Setting textContent does cause thrashing.

Here is what the DOM specification has to say:

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.

The fix

A non thrashing way would be to get the element's text nodes and modify those instead of using textContent or innerText (which is non standard).

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

Of course if the actual text will change, a paint will have to occur to update what you're seeing.