The browser's page rendering process
HTML parsing process
Under normal circumstances, the server will return the xx.html file to the browser. Parsing the html is actually the construction process of the Dom tree.
We can simply analyze the html parsing process based on the following html structure
Parse CSS rule tree
During the parsing process, if a CSS link element is encountered, the browser will be responsible for downloading the corresponding CSS file:
PS: Downloading CSS here will not affect the parsing of the DOM tree.
After the download is completed, the CSS file will be parsed and the corresponding rule tree will be parsed. The example is as follows:
body{
font-size: 16px}
p{
font-weight: bold}
span{
color: red}
p span{
display:none}
img{
float: right}
Parsing step to build Render Tree
Once you have the DOM Tree and CSSOM Tree, you can combine the two to build the Render Tree.
have to be aware of is:
- The link element will not block the DOM Tree construction process, but it will block the Render Tree construction process.
- Render Tree and DOM Tree do not have a one-to-one correspondence. For example, elements with display set to none will not appear in the render tree at all;
Parse step layout and drawing
- Run Layout on the Render Tree to calculate the geometry of each node.
- The rendering tree will indicate which nodes are displayed and other styles, but it does not indicate the size, position and other information of each node;
- Layout determines the width, height, and position information of all nodes in the rendering tree;
- Draw each node to the screen
- In the drawing phase, the browser converts each frame calculated in the layout phase into actual pixels on the screen;
- Including drawing the visible part of the element, such as text, color, border, shadow, replacement element (such as img)
You can refer to the following figure for the rendering process:
After completing the above five steps, the corresponding xx.html file is successfully rendered in the browser.
Reflow and redraw
reflow
reflow ：
- The size and position of the nodes we render are determined after the first rendering during layout.
- The subsequent recalculation of node size and position is called reflow.
When does reflow occur:
- DOM structure changes (addition & removal)
- Changed the CSS style code, that is, the layout
- Modified window size
- Or some built-in functions are called to obtain position and size information.
reprint
- The first time we render, in the previous flowchart was calledprinting
- It becomes a redraw when it needs to be re-rendered later.
How redraw occurs:
- Modify CSS such as color text style
Expand ideas
- As long as reflow occurs, it will definitely cause redrawing. In fact, after seeing the above explanation, it is easy to find that reflow is also triggered when the style code is started or changed.
- The performance of reflow is not good and it is obvious that re-rendering the entire DOM is a waste of performance.
Summarize
- Modify the style to reduce the number of reflows as much as possible. That is, after the design is completed, do not change the style and DOM structure unless necessary.
- Avoid frequent use of JS to manipulate DOM
- Minimize functions to obtain storage location information
Special analysis - composite synthesis
During the drawing process, the laid out elements can be drawn into multiple composite layers.
Properties that will form a new composition layer:
- 3D transforms
- video、canvas、iframe
- opacity animation conversion
- position: fixed
- will-change
- animation or transition has opacity and transform set
PS: Layering can indeed improve performance, but it comes at the expense of memory management, so it is not used as a performance optimization strategy.
The relationship between script elements and page parsing
What step does JS take in our rendering process?
- When rendering html, js does not have the ability to continue constructing the DOM.
- If the required parts are needed, the construction will be stopped first, download js and execute the script.
- After building what needs to be built, continue to build the DOM.
What are the benefits of doing this?
- JS has the function of manipulating and modifying DOM
- Why execute the js script first? As mentioned before, reflow is very performance-intensive, so it is best to do it all at once to reduce unnecessary reflow.
Code examples
index.html
<script src="./js/test.js"></script>
<body>
<div class="box"></div>
</body>
<script>
var boxel = document.getElementsByClassName("box")
console.log(boxel);
</script>
test.js
debugger
console.log("hello")
New question:
- In the current development model, most of them use vue and React as the development framework. The proportion of JS is often large, and the processing of events will also take longer.
- This also causes that if the parsing is blocked, the interface may not display anything until the script parsing is completed.
Here js provides us with two attributes to solve this problem
defer attribute
The defer attribute tells the browser not to wait for the script to be downloaded, but to continue parsing HTML and building the DOM Tree. If the script is downloaded in advance, wait for loading. When the DOM is completed, execute the code in defer before triggering DOMContentLoaded.
PS: defer is executed in the default order without affecting the order and can operate the DOM
<script>
window.addEventListener("DOMContentLoaded", () => {
console.log("DOMContentLoaded");
})
</script>
<script>
var boxel = document.getElementsByClassName("box")
console.log(boxel);
</script>
<script defer>
console.log("defer-demo")
</script>
<script>
debugger
console.log("hello")
</script>
suggestion:
- Putting defer in the head and using the characteristics of this attribute at the end is putting the cart before the horse.
- defer only has an effect on external scripts
async attribute
The async feature is somewhat similar to defer, and it also allows scripts to not block the page.
Its features:
- The browser will not block for async scripts (similar to defer);
- Async scripts cannot guarantee the order. They are downloaded and run independently and will not wait for other scripts.
- async is not guaranteed to execute before or after DOMContentLoaded
<script>
window.addEventListener("DOMContentLoaded", () => {
console.log("DOMContentLoaded");
})
</script>
<script async>
console.log("defer-demo")
</script>
Summarize
- defer is usually used for document parsing and JS code that operates DOM and has order requirements.
- async is usually used for independent scripts, which can be understood as scripts that have no dependencies. If there are dependencies, there is no guarantee that they will be loaded in advance.
Summarize
- First of all, understand and understand some browser kernels
- Understand the flow from server loading to rendered page
- Detail the general content of each step
- Found problems and explored some solutions to them