Browser loading process
From the time we enter the url to the loading of the page, the process experienced by the browser is as follows:
1. The browser parses the url address we entered
2. DNS resolves the domain name into an ip number
3. The browser obtains the port number
4. According to the IP address, through TCP Three-way handshake to establish the connection between the server and the browser
5. Send HTTP request
6. The server processes the request and returns the response result 7. Disconnect the connection by waving four times
through TCP
8. The browser loads, parses, and renders
browser analysis
The browser rendering engine executes the code from top to bottom, and the browser parses three things.
1.parsing HTML, parse HTML into a DOM tree.
2.parsing CSS: Parse CSS into CSSOM. After receiving the CSS, the rendering engine of the browser parses the CSS into styleSheets that the browser can understand. There are three ways to introduce CSS styles (1) external CSS imported through link or import (2
)
internal Embedded CSS
(3) The order of parsing CSS in the style inline CSS added in the attribute tag
: browser style –> user-defined style –> external CSS introduced by link or import –> inline style of style tag
3.Analysis JavaScript. After the JavaScript script is loaded, operate the DOM tree and CSS Rule Tree through the DOM tree and CSSOM.
Note :
(1) CSS will not block DOM parsing, but will block page rendering
(2) JS blocks DOM parsing, browsers encounterscripttab, triggers page rendering
The browser's rendering mechanism
1. The browser parses HTML tags and builds a DOM tree
2. The browser parses CSS to generate a CSSOM tree
3. The browser combines the DOM tree and CSSOM tree to generate a rendering tree
4. The browser calculates the position of each node, according to the rendering Tree to layout
5. Draw the nodes after layout on the screen