Enter URL --> URL resolution + DNS domain name resolution --> TCP three-way handshake --> TCP four-way handshake --> browser rendering
1. Input URL: First, judge whether the input content is a URL. If it is not a URL, it will use the browser’s search engine to search and query by default. If it is a URL, send the URL to the network process. First, it will Find this address in the cache. If the input URL address is not found in the cache, it will perform URL parsing to resolve the IP address of the server to be requested.
Cache priority: first search in the memory, if the memory does not exist, then search in the hard disk, if there is no hard disk, then make a network request, and the requested resources are cached in the hard disk and memory
2. The purpose of DNS domain name resolution is to find the ip address corresponding to the domain name
First check whether there is a record of the URL that has been resolved in the cache, if not, the local DNS server forwards the request, and searches for the corresponding root domain, top-level domain, and authoritative domain externally;
The priority of finding the cache: client --> browser cache --> local host file --> local DNS resolution cache --> local DNS server forwards the request (go out to find it)
3. TCP three-way handshake: the client initiates a request to create a TCP connection to the server
4. TCP waved four times: the client initiates a request to the server to disconnect a TCP connection
5. Browser rendering: At this point, the response body of the corresponding resource has been obtained, and parsing and rendering start
Parsing page steps:
a. The browser parses HTML into dom tree (commonly known as dom tree) through HTMLParser
b. The browser parses css into Style Rule Tree (commonly known as cssom tree) through CSSParser
c. The browser parses and applies JavaScript code to the layout through DOM API and CSSOM API, constructs the render tree according to the dom tree and cssom tree, and calculates the layout information of the element
d. Layer the render tree and generate a layer tree
e. The final render tree is the abstract display of the document structure of the entire page, and then present the response effect as required
Rendering engine: It is mainly responsible for obtaining the content of the webpage (html, XML, images, etc.), calculating the display mode of the webpage, and then outputting it to the browser. The grammatical interpretation of the webpage is different for different browser kernels, so the rendered The effect is not the same
js engine: It is mainly responsible for parsing and executing JavaScript code to realize the dynamic effect of web pages.