Does Javascript changing DOM always causes UI to update?

Question

Is the updating of UI when HTML DOM in browser changes guaranteed? or is there a mechanism to notify Browser to updated the UI to reflect the changes?

Is there an specification for browsers to implement this behaviour that when html dom is changed to update the UI?

The act of updating the DOM in *itself* means that the UI will change -- unless the element is invisible / hidden, in which case the user won't notice it -- because it is not a part of the UI. The changes will still be immediate though. — Obsidian Age, May 17 '19 at 00:05

score 2 · Accepted Answer · answered May 17 '19 at 00:09

No, you can very well modify the DOM without causing any repaint.

Take for instance an element whose display is set to none. It's still in the DOM, but discarded by the CSSOM and won't cause any repaint if modified:

setTimeout(() => {
  content_div.textContent = 'I got modified';
  console.log(content_div.outerHTML) // "<div id="content">I got modified</div>"
}, 1000);

#hidden {
  display: none;
}

<div id="wrapper">
some hidden content below
<div id="hidden">
  <div id="content_div">I will get modified</div>
</div>
<div>

Now, I feel you need to understand the basics of the subject, so see this Q/A which explains the three phases of the browser's redraw operation:

DOM Update (sync)
Reflow (normally async but can be forced synchronously)
Repaint (async @60 FPS max)

And for the specs, it's here.

Does Javascript changing DOM always causes UI to update?

1 Answers1