1. Enter the URL in the browser address bar
  2. The browser checks the cache, and if the requested resource is in the cache and fresh, skip to the transcoding step
  3. Browser parse URL fetch protocol, host, port, path
  4. The browser assembles an HTTP (GET) request packet
  5. The browser obtains the host IP address as follows:
    1. Browser cache
    2. This machine is the cache
    3. Hosts file
    4. Router cache
    5. ISP DNS cache
    6. DNS recursive query (different IP addresses may occur due to load balancing)
  6. Open a socket with the destination IP address, establish a TCP connection with the port, and shake hands three times
  7. After a TCP connection is established, an HTTP request is sent
  8. The server accepts the request, parses it, and forwards it to a server, such as the virtual Host using the HTTP Host header to determine the requested server
  9. The server checks whether the HTTP request header contains cache authentication information. If the cache is fresh, the server returns the status code, such as 304
  10. The handler reads the complete request and prepares the HTTP response, which may require, for example, querying the database
  11. The server sends the response back to the browser over the TCP connection
  12. The browser receives the HTTP response and then closes the TCP connection or deactivates the four-way handshake based on the situation
  13. Does the browser check the response status: 1XX, 3XX, 4XX, 5XX, these cases are handled differently from 2XX
  14. If the resource is cacheable, cache it
  15. Decode the response (for example, gzip compression)
  16. Decide what to do based on the resource type (assuming the resource is an HTML document)
  17. Parsing HTML documents, building DOM trees, downloading resources, constructing CSSOM trees, and executing JS scripts are all in no strict order, as explained below
  18. Build a DOM tree:
    1. Tokenizing: Parsing character streams into tags according to the HTML specification
    2. Lexing: Lexical analysis converts tags into objects and defines attributes and rules
    3. DOM Construction: Organize objects into DOM trees based on HTML tag relationships
  19. Image, style sheet, JS file encountered during parsing, start download
  20. Build the CSSOM tree:
    1. Tokenizing: Character stream converted to token stream
    2. Node: Creates a Node based on the tag
    3. CSSOM: The node creates the CSSOM tree
  21. Build render tree from DOM tree and CSSOM tree:
    1. All visible nodes are traversed from the root node of the DOM tree. Invisible nodes include:
    • Script, meta, tags that are not themselves visible
    • Nodes hidden by CSS, such as display: None
    1. For each visible node, find the appropriate CSSOM rule and apply it
    2. Publish the content and calculation style of the visual node
  22. Js parsing is as follows:
    1. The browser creates the Document object, parses the HTML, and adds the parsed elements and text nodes to the Document
    2. When the HTML parser encounters scripts without async and defer, it adds them to the document and then executes inline or external scripts. These scripts execute synchronously, and the parser pauses while the script is downloaded and executed. This allows you to insert text into the input stream with document.write(). Synchronous scripts often simply define functions and register event handlers that can iterate and manipulate scripts and their previous document contents
    3. When the parser encounters a script with the async property set, it starts downloading the script and continues parsing the document. The script is executed as soon as it is downloaded, but the parser does not stop for it to download. Document.write () is prohibited for asynchronous scripts, which have access to their own script and previous document elements
    4. When the document is parsed, document.readState becomes interactive
    5. All defer scripts will be executed in the order in which they appear in the document. The deferred script has access to the full document tree, and document.write() is prohibited.
    6. The browser fires the DOMContentLoaded event on the Document object
    7. When the document is fully parsed, the browser may still be waiting for content such as images to load. When that content is loaded and all asynchronous scripts are loaded and executed, document.readState changes to complete and the window fires the load event
  23. Display the page (the page is displayed gradually as the HTML is parsed)