21

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>

image

But replace innerText with textContent and watch it thrash:

image

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?

1
  • 2
    I would avoid innerText: it's non-standard and varies significantly in implementation, and is not even implemented in Firefox. What happens if you just append a text node? var textNode = document.createTextNode("innerText"); document.getElementById("test").appendChild(textNode)
    – Tim Down
    Jun 19, 2013 at 23:19

2 Answers 2

12

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.

profile

2
  • 1
    Great answer. I also found this Mozilla bug, which documents some efforts to optimize this case natively: bugzilla.mozilla.org/show_bug.cgi?id=725221
    – John
    Jun 20, 2013 at 17:49
  • 1
    I have to add that nodeValue acts the same as innerText. If the value is the same, the layout is not trashed, but when the value is different, the layout gets trashed exactly the same as textContent: jsfiddle.net/5N7Rr/15 and i.imgur.com/Yvm0mmK.gifv. Pretty dump to rerender the layout of the entire document as the size of a small component is the same. Jun 6, 2017 at 20:43
2

In addition to Benjamin answer, I noticed that when the value of nodeValue or innerText is different than the previous one, the entire document layout is trashed too, as you can see here: http://jsfiddle.net/5N7Rr/15/

(Full screen, open in new tab) enter image description here

The browser trashes the entire layout because he don't knows the size of the element, so the trick to avoid entire document trashing is to set a fixed height and width AND set overflow to hidden (Important). This way you tell the browser that whatever the content of the element is, it never is going to exit the element boundaries.

EDIT 30/11/2020: I also needed to add CSS property contain: strict to explicitly tell the browser that the content is not going to exit the container.

Fiddle: http://jsfiddle.net/u9pra25f/

And proof (Full screen again). Notice how the layout update only affects the element: enter image description here

3
  • This does not seem to work anymore. The example in the fiddle appears to calculate layout for the entire page (including the area outside the result iframe) every time it updates.
    – Nnnes
    Nov 30, 2020 at 7:51
  • You are right @Nnnes it now says "Nodes that need Layout 5 of 6" instead of "2 of 2". Seems that is invalidating the entire Layout. Going to analyze why. Nov 30, 2020 at 8:35
  • 1
    If I add CSS contain: strict it shows again "2 of 2" but don't shows the div as layout root. I don't know if is an output information change between Chrome releases or if it is still not a root layer. Nov 30, 2020 at 8:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.