Interviewer: Tell me what happened after entering the URL in the address bar and pressing Enter?
1. URL resolution and DNS query
When you enter a URL in the browser's address bar and press Enter, the browser will first parse the URL. URLs usually consist of multiple parts, including protocol (such as http or https), domain name or IP address, port number (the default port is used if not specified), path and query parameters, etc.
After the browser parses the URL, it will extract the domain name part, and then perform DNS query to convert the domain name into the corresponding IP address. DNS query is the process of mapping a domain name to an IP address. The browser sends a query request to the local DNS server, and the local DNS server will query the root DNS server step by step until the IP address corresponding to the target domain name is found. Once the IP address is obtained, the browser can send a request to the server.
Two, TCP connection and HTTP request
Next, the browser needs to establish a TCP connection with the target server. The TCP connection is a connection-oriented transmission protocol that ensures reliable transmission of data. When establishing a TCP connection, the browser will go through a three-way handshake process to ensure that the connection status between the client and the server is normal.
When the TCP connection is established, the browser sends an HTTP request to the server. HTTP request includes request line, request header and request body. The request line contains the request method (such as GET, POST, etc.) and path information. The request header contains some additional information, such as the browser's User-Agent, Accept-Encoding, etc. The request body contains some submitted data, such as form data or JSON data.
3. Server processing and HTTP response
After the server receives the HTTP request, it will process it according to the content of the request. The server may read the data in the request body, query the database, execute business logic and other operations.
When processing is complete, the server generates an HTTP response and sends it back to the browser. An HTTP response includes a status line, response headers, and a response body. The status line contains a status code that indicates the result of the server's processing of the request. Response headers contain some additional information such as server type, response time, etc. The response body contains the actual returned data, such as HTML pages, JSON data, etc.
4. Page rendering
After the browser receives the response from the server, it parses and renders the returned resource. If the response is an HTML page, the browser will build a DOM tree and a CSS rule tree, and finally generate a rendering tree. The browser then lays out and draws the rendering tree, and finally presents the page to the user.
During the page rendering process, the browser also downloads other resources referenced in the page, such as CSS files, JavaScript files, pictures, etc., and performs the same parsing and rendering process on these resources.
1. Parsing HTML
After the browser receives the HTML document from the server, it will parse it and build a DOM tree (Document Object Model). The DOM tree is the logical structure representation of the document. Each HTML tag will be parsed into a node of the DOM tree, and the nesting relationship between tags corresponds to the parent-child relationship in the DOM tree.
2. Parsing CSS
Parse the CSS style sheet and generate a CSS rule tree (style sheet object model). The CSS rule tree describes the style information applied to each element in the document. The DOM tree and the CSS rule tree are combined to form a render tree (Render Tree), which only contains the nodes to be displayed and their corresponding style information.
3. Layout
Each node in the render tree has corresponding geometric information, such as position, size, etc. In the layout stage, the precise position of the node on the page is calculated based on the geometric information of each node in the rendering tree, and the display position of each element on the screen is determined.
4. Draw (Paint)
After the layout is complete, the browser draws the page based on the geometry information obtained during the render tree and layout stages. This process will convert each node of the page into actual pixels on the screen, creating a bitmap that contains all the pixel information.
5. Composite
After the drawing phase is completed, the browser will combine the various layers (Layers) according to the composition order to form the final page image. Compositing is to combine the pixel information of each layer to finally form the page that the user sees.
It is worth noting that in order to improve performance and user experience, modern browsers will adopt some optimization techniques, such as asynchronous loading of scripts, lazy loading of images, pre-rendering, etc. These optimization techniques can reduce page loading time and rendering time, and improve page display speed and responsiveness.
Page rendering is a relatively complex part of the whole process, which involves multiple modules of the browser working together to ensure that users can browse web content quickly and smoothly.
V. Summary
The whole process can be summarized as:
- URL resolution and DNS query to resolve domain names into IP addresses;
- Establish a TCP connection to ensure the reliability of data transmission;
- Send an HTTP request to request resources from the server;
- The server processes the request and sends an HTTP response;
- The browser parses and renders the page, displaying it to the user.
These steps enable users to access various resources on the Internet through a browser, thereby realizing functions such as web page browsing and data transmission.
references
- https://github.com/febobo/web-interview/issues/141
- https://zhuanlan.zhihu.com/p/80551769