## Explain the process of page rendering in the browser
1. Parse HTML files and create DOM tree
From top to bottom, any style (link, style) and script (script) will be blocked (external styles will not block the loading of subsequent external scripts).
2. Parsing CSS
priority: browser default setting < user setting < external style < inline style < style style in HTML;
specific level: id number * 100 + class or pseudo-class number * 10 + tag name * 1
3. Merge CSS and DOM to build a rendering tree (rendering tree)
DOM tree corresponds to HTML one by one, rendering tree ignores elements such as head, display: none
4. Layout and drawing, repaint and
reflow Row: If a part of the rendering tree is updated and the size changes, rearrangement will occur;
Redraw: Some nodes need to be updated, but other set shapes are not changed. If you change the color of an element, a repaint occurs.
Attachment:
1. When will redraw and reflow occur:
(1) Add or delete DOM nodes;
(2) display:none (reflow and redraw); visibility:hidden (reflow);
(3) move the page
(4) Add or modify the style; (
5) The user changes the window size, scrolls the page, etc.
2. How to reduce redrawing and reflow to improve page performance:
(1) Don't modify the attributes one by one, you should modify the
wrong spelling through a class: div.style.width="50px";div.style.top="60px ";
Correct spelling: div.className+="modify";
(2) Clone node, modify it in the copy, and then directly replace the current node;
(3) If you want to frequently obtain the calculated style, please temporarily save it;
(4) Reduce Affected Nodes: Inserting a node at the top of the page will affect all subsequent nodes. Absolutely positioned element changes will affect fewer elements;
(5) Add DOM in batches: When multiple DOMs are inserted or modified, they should form a long string and put them into the DOM at one time. Using innerHTML is always faster than DOM manipulation. (Special note: innerHTML doesn't execute embedded scripts in strings, so it doesn't create an XSS vulnerability).
1. Parse HTML files and create DOM tree
From top to bottom, any style (link, style) and script (script) will be blocked (external styles will not block the loading of subsequent external scripts).
2. Parsing CSS
priority: browser default setting < user setting < external style < inline style < style style in HTML;
specific level: id number * 100 + class or pseudo-class number * 10 + tag name * 1
3. Merge CSS and DOM to build a rendering tree (rendering tree)
DOM tree corresponds to HTML one by one, rendering tree ignores elements such as head, display: none
4. Layout and drawing, repaint and
reflow Row: If a part of the rendering tree is updated and the size changes, rearrangement will occur;
Redraw: Some nodes need to be updated, but other set shapes are not changed. If you change the color of an element, a repaint occurs.
Attachment:
1. When will redraw and reflow occur:
(1) Add or delete DOM nodes;
(2) display:none (reflow and redraw); visibility:hidden (reflow);
(3) move the page
(4) Add or modify the style; (
5) The user changes the window size, scrolls the page, etc.
2. How to reduce redrawing and reflow to improve page performance:
(1) Don't modify the attributes one by one, you should modify the
wrong spelling through a class: div.style.width="50px";div.style.top="60px ";
Correct spelling: div.className+="modify";
(2) Clone node, modify it in the copy, and then directly replace the current node;
(3) If you want to frequently obtain the calculated style, please temporarily save it;
(4) Reduce Affected Nodes: Inserting a node at the top of the page will affect all subsequent nodes. Absolutely positioned element changes will affect fewer elements;
(5) Add DOM in batches: When multiple DOMs are inserted or modified, they should form a long string and put them into the DOM at one time. Using innerHTML is always faster than DOM manipulation. (Special note: innerHTML doesn't execute embedded scripts in strings, so it doesn't create an XSS vulnerability).