[learning notes] Web page rendering process

The rendering process is roughly divided into

1, Handle HTML Tag and build DOM Trees
2, Handle CSS Tag and build CSSOM Trees
3, take DOM and CSSOM Merge into a rendering tree
4, Layout according to the rendering tree , To calculate the geometric information of each node
5, Draw each node to the screen

The whole rendering process is actually to URL Corresponding resources , Through the analysis of the rendering engine of the tour , Output visual images

1, Handle HTML Tag and build DOM Trees

DOM Node tree species node and HTML The contents of the document correspond one by one ,DOM Tree building process ： Read HTML file , Turn bytes into characters , determine tokens
then tokens Convert to node , Build with nodes DOM Trees

2, Handle CSS Tag and build CSSOM Trees

In the build DOM In the process of trees , stay HTML Document head Encountered in the tag link label , This tag refers to an external css Style sheets , Because it foresees the need to use css Resources to render pages , The browser will immediately issue a request for the css Requests for resources , And carry on CSSOM The construction of trees .CSSOM The construction process of the tree is similar to DOM The construction process of the tree is consistent ： Read CSS file , Convert bytes to characters , determine token, then token Convert to nodes , Build with nodes CSSOM Trees

3, take DOM and CSSOM Merge into a rendering tree

DOM+CSSOM= Render tree , Render tree has DOM Trees ,CSSOM Trees merge into , But you don't have to wait CSSOM After the tree is loaded, it starts to load and merge to build the rendering tree , There are five conditions for the construction of the three , Nor are they independent , It's a cross , Build in parallel , Therefore, one side loading , One side analysis , While rendering the working phenomenon .

4, Layout according to the rendering tree , To calculate the geometric information of each node

5, Draw each node to the screen

Calculate the layout of each visible element according to the rendering tree , And output to the drawing process , Renders pixels onto the screen .