Summarize the browser operation mechanism in the simplest words

This is my participation 8 The fourth of the yuegengwen challenge 8 God , Check out the activity details ：8 Yuegengwen challenge

Rendering process ：

1. Input url, Browser according to DNS The server gets the domain name IP Address
2. Request... From the server , The server returns the request , The client gets the returned content
3. Top down generation dom Trees
4. Rendering css Trees , Generate cssom
5. Rendering layout, Calculate node size , Location
6. Render the page according to the above

reflection

During rendering , If you encounter <script> Stop rendering , perform JS Code , At this time, the parser is in a suspended state , etc. JS After loading , And then build

therefore , It is suggested that script The label on the body label Bottom That's why

structure

dom tree The root of is document, Left branch right pole is head and body, The following are tree leaf nodes

backflow / rearrangement ：

When part or all of the rendering tree needs to be rebuilt due to layout problems , It will flow back / rearrangement , Every page must have one , When it was first loaded

Repaint ： When a part of the rendering tree needs to be rebuilt due to problems such as style , Will redraw

Rearrangement will definitely redraw , But redrawing does not necessarily rearrange

Rearranging and redrawing will cause the browser to take time , Katon and so on , So don't repeat changes frequently dom

Optimize according to the above problems

1. Direct change classname
2. If you want to create more than one dom, Just add it all at once
3. Elements that require multiple rearrangements , Set absolute positioning away from the document stream , It won't affect other elements
4. Avoid using CSS expression
5. Avoid using table Layout

So with virtual dom To optimize this

fictitious dom Yes, it is js The simulated tree , Once built, it will be rendered to the document stream at one time

Use when updating diff The algorithm is updated ,diff The algorithm involves a key, It is used to ensure that the node position can be accurately found and changed , Otherwise, it will cause repeated construction of subsequent nodes , Consume unnecessary performance