Enter the URL into the entire rendering process of the page
- DNS resolution (url >IP address) :
- DNS cache (browser cache — system cache — router cache)
- Hierarchical query (local DNS files –ISP DNS server — root DNS server –COM top-level DNS server –Google.com domain server)
- TCP connection (triple handshake)- Triple handshake
- Sending an HTTP request
- The server processes the request and returns an HTTP packet
- The browser parses and renders the page
- Disconnect (four waves)- Four waves
Process analysis
1. The DNS
DNS cache
DNS has multiple levels of cache, sorted by distance from browser: browser cache, system cache, router cache, ISP server cache, root DNS cache, top-level DNS cache, and primary DNS cache.
- In your Chrome browser type:
chrome://dns/You can see the DNS cache in Chrome. - The system cache is stored in /etc/hosts(Linux)
2.Initiating a TCP connection (three-way handshake)
3. Send an HTTP request
HTTP cache(Browser cache)
HTTP belongs to the client cache, and we often think of browsers as having a cache database that holds static files.
4. The server processes the request and returns an HTTP packet
Common status code
| Status code | describe |
|---|---|
| 200 | This status code is normally returned when the request was successfully processed |
| 204 | The server successfully processed the request, but did not return anything |
| 301 | Permanent redirection, such as domain name conversion, consistent URL and page, no site hijacking (inconsistent URL and site content) |
| 302 | Temporary redirection, URL and page may be inconsistent (site hijacking can occur) |
| 304 | The server has performed GET, but the file is unchanged and cached on the client |
| 400 | A syntax error occurred in the request packet. Procedure |
| 401 | Unauthorized request requires authentication |
| 403 | When the request is rejected, the server does not need to give a detailed reason for the rejection |
| 404 | The server did not find the requested page |
| 422 | The request was well-formed, but could not be responded to due to semantic errors |
| 500 | The server encountered an error and could not complete the request |
5. The browser parses the rendered page
- Parsing HTML to form a DOM tree
- Parses the CSS to form the CSSOM tree
- Combine DOM tree and CSSOM tree to form render tree
- The browser starts rendering and draws the page
- This process involves two important concepts: backflow and redraw. DOM nodes exist in a box model, requiring the browser to calculate position and width, etc. This process is called backflow. Once the page’s width, height, size, color and other attributes are determined, the browser begins to draw the content, a process called redraw. The browser must go through these two processes when opening the page, but this process is very, very, very performance consuming, so we should minimize page backflow and redraw
