javascript – How does the browser redraw after the DOM has been rewritten?

Question: Question:

After loading HTML / CSS in the browser and drawing the page, if JavaScript dynamically rewrites the DOM, the browser will have to redraw the page.

To put it simply, the cost of drawing a page cannot be ignored. A slight change in the DOM can change the layout of the element, and it is likely that the text wrapping will change and the layout will change further.

But in many cases, the part that can be rewritten is just a small part of the HTML / CSS code. Therefore, I think it's okay to redraw a part of the drawing instead of redrawing the whole thing when redrawing, but I don't know the details well.

What is the algorithm used by the browser to redraw the page? I would appreciate it if you could tell me what kind of speedup there is with a granularity that can be itemized.

_{Note: I personally approve the answer because I have somehow got an image, but I welcome you to post more answers and tell me other optimizations and more details 🙂}

Answer: Answer:

Basically, it is a stack of unnecessary processing within the range that conforms to the DOM, HTML, CSS specifications .

Roughly, there are steps of "DOM change-> style calculation-> layout-> paint-> composition". I think that the following processing is done by any browser engine.

• If a DOM change occurs in a part that is not connected to the displayed Document tree, do nothing
• If an element is inserted or deleted, there is no need to recalculate the style of sibling elements if no particular combiner or pseudo-class is used.
• The style of descendants of elements with display: none does not need to be calculated
• Recalculating the layout of one element does not require re-layout of trees that belong to another layout flow (position: absolute is a different flow)
• If only the properties (color, box-shadow, etc.) that do not affect the box size are changed by changing the style, you can do after painting without laying out.
• If only the layer location or transform has changed and the paint result is still in memory, you only have to start over with the composition.