0

Let's assume I have such abstract template:

<div>
  <div id="header">
    <h1>Hello, {{model.subject}}!</h1>
    <p>How are you today?</p>
  </div>
</div>

where {model} will be related to some framework which is not so important (no virtual DOM or smth)

Suppose model -> subject value is changed. Will browser re-paint only h1 node or whole #header node will be re-paint? I mean how browser marks nodes as "dirty"?

From "Dirty bit system" section in this article: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#Layout

"In order not to do a full layout for every small change, browsers use a "dirty bit" system. A renderer that is changed or added marks itself and its children as "dirty": needing layout. There are two flags: "dirty", and "children are dirty" which means that although the renderer itself may be OK, it has at least one child that needs a layout."

So the question: will any changes of some node affect to it's sibling? To p at the present example^. And what the actual browser strategy about that.

James Jr.
  • 163
  • 6
  • 1
    What you are calling "dirty" and how the browser goes about determining what is and isn't dirty is really covered under the topics of reflow and repaint. The actual implementation for these things is not standardized and implementation dependent, but the post linked to in the duplicate should cover it. – Scott Marcus Dec 29 '20 at 19:26
  • @ScottMarcus got it, thanks – James Jr. Dec 29 '20 at 19:27

0 Answers0