Explain the browser rendering page process in detail

Explain the browser rendering page process in detail

1. Parse the HTML file and create the DOM tree

From top to bottom, any styles (link, style) and scripts (script) encountered will block (external styles do not block subsequent external script loading).

2. Parsing CSS

Priority: Browser default setting < User settings < External style < Inline style < style style in HTML;
Specific level: id number * 100 + class or pseudo class number * 10 + tag name * 1

3. Combine CSS with DOM to build a rendering tree (renderingtree)

The DOM tree corresponds to HTML11, and the rendering tree ignores elements such as head, display: none

4. Layout and drawing, redrawing (repaint) and rearranging (reflow)

Rearrangement: If 1 part of the rendering tree is updated and the size changes, rearrangement will occur;
Redraw: Some nodes need to be updated, but other collection shapes are not changed. If you change the color of an element, redrawing will occur.

Attachment:

1. When will redrawing and rearranging occur:

(1) Adding or deleting DOM nodes;
(2) display: none (rearrangement and redrawing); visibility: hidden (rearrangement);
(3) Move the elements in the page;
(4) Adding or modifying styles;
(5) The user changes the window size, scrolls the page, etc.

2. How to reduce redrawing and rearrangement to improve page performance:

(1) Do not modify attributes one by one, but modify them through one class

Wrong writing: div. style. width= "50px"; div. style. top= "60px";
Correct writing: div.className+= "modify";

(2) clone node, modify in the copy, and then directly replace the current node;
(3) If you want to get the calculated style frequently, please temporarily save it;
(4) Reduce affected nodes: Inserting a node at the top of the page will affect all subsequent nodes. However, the change of absolutely positioned elements will affect fewer elements;
(5) Add DOM in batches: If multiple DOM are inserted or modified, they should form a long string and then put it into DOM once. Using innerHTML is always faster than using DOM. (Note in particular: innerHTML does not execute embedded scripts in strings and therefore does not create an XSS vulnerability).

Thank you for reading, hope to help everyone, thank you for your support to this site!