Writing this article is intended as my own notes, convenient for myself to understand. Without reference to too much information, through other blogs and some of my own understanding of the collation.

The browser

As a client, the main function of the browser is to display accessible resources. Whether these resources are local resources or obtained by network request.

Browser architecture

  1. User interface: including address bar, back/forward button, bookmark directory, refresh button, etc
  2. Browser engine: Interface for querying and manipulating the rendering engine
  3. Rendering engine: Used to process the resource content and display the results of the processing, which is called the kernel
  4. Network: Completes the network call
  5. UI back end: Used to draw basic components such as composite selection boxes and dialogs. It has a common interface that is not specific to a platform. The bottom layer uses the user’s operating system interface
  6. JS interpreter: Used to interpret and execute JS scripts
  7. Data storage: Occupies a certain number of hard disks to store data

The rendering process of the page

  1. Enter an address in the address bar to trigger a network request to obtain resource files
  2. HTML parsers parse HTML files to build DOM trees
  3. CSS is parsed by CSS parser to build CSSOM tree
  4. The JS encountered is resolved by the JS parser
  5. DOM Tree and CSSOM Tree build the rendering Tree
  6. The rendering book determines the location of nodes (layout or reflux) based on the structural style — reflux
  7. Once the position is determined, draw according to the appearance style – redraw
  8. Display content to the main browser window through the UI background and user interface components

DNS resolution process after entering the URL

The distance between the DNS cache and the browser is as follows: browser cache, system cache, router cache, IPS server cache, root domain name cache, top-level domain name cache, and primary domain name server cache

  1. Enter the network address and initiate a request. The browser resolves the domain name and searches for the corresponding IP address in the hosts file on the local hard disk
  2. If no CORRESPONDING IP address is found on the local hard disk, the browser sends a DNS request to the local DNS server. The local DNS server queries its cache record and returns the result if there is a record in the cache. If no, the local DNS server queries the DNS root server
  3. If the ROOT DNS server does not have a specific mapping between a domain name and an IP address, the root DNS server tells the local DNS server to search for the domain server and provides the domain server address
  4. The local DNS server sends a request to the top-level domain name server (such as the.com domain name). After receiving the request, the TOP-LEVEL domain name server tells the local DNS server the ADDRESS of the DNS server sent by the local service
  5. The local DNS server sends a request to the domain name resolution server and receives a corresponding IP address

Three-way handshakes and four-way waves for TCP/IP connections

Three handshakes to establish a connection

  1. The client sends a packet with the SYN flag to the server (request packet)
  2. After receiving the request packet, the server sends back a packet with the SYN/ACK flag to acknowledge the request (response-request packet).
  3. Finally, the client sends back a packet with ACK flag, indicating that the handshake is over and the connection is successful (reply packet)

Four waves to close the connection

  1. The client sends a connection closure request (FIN).
  2. After receiving the request, the server sends an ACK to confirm receipt of the request
  3. The server confirms that no data can be transmitted and sends a FIN request to the client
  4. The client sends back an ACK confirming that the connection is closed