Interface rendering process
- 1 Enter the URL in the address box
- 2 DNS will complete domain name resolution and help us find the corresponding server host
- 3. Establish TCP end-to-end connection (set up a data transfer channel between your computer and the connected server host)
- 4 because TCP is the transmission layer in the network model, and the specific BS data transmission occurs in the application layer, we need to exchange data with the server host through the HTTP protocol of the application layer
- 5 The server performs calculation based on the data submitted by the client and returns the specific content to the client
- 6 After the fifth step is completed, it is equivalent to the browser at this time to get the web resource data (string).
- 7 The browser gets the bytes of data and wants to render it and display it on the interface
Browser multiprocess
- Multiple render processes Html CSS JS related operations
- The plug-in process deals with browser plug-ins
- The browser main process manages some of the operations of the browser itself
- The GPU process was originally designed for 3D animation
- The network process downloads network resources
How does the browser render the interface
- The renderer process starts a process that calls the Html parser to perform the rendering
- B first processes the byte data into a string, then picks out the corresponding tokens from the string, and finally puts the tags together to generate a DOM tree
- C and DOM tree construction is accompanied by a CSSOM tree construction process
- D merges the DOM tree with the CSSOM tree to generate a render tree (something that exists in memory but is invisible to the browser interface)
- The geometry information (size, position) of the interface can be determined according to the previous tree.
- F will be redrawn after the rearrangement. All the information calculated above will be drawn on the screen after the GPU calls the corresponding GUI API pin
- After g, you can see the interface