“This is the first day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021”

  1. DNS (url -> IP) :DNS cache: browser, operating system, hierarchical query: local DNS server, root DNS server, COM hierarchical DNS server, Google.com domain server
  2. TCP connection (three-way handshake)
  3. Sends an HTTP request, analyzes the URL, and sets the request packet
  4. The server processes the request and returns HTTP packets
  5. The browser parses and renders the page
  6. End of connection (four waves)

Three-way handshake

Here’s markdown’s graphic. It looks like the nuggets can’t read it

Client -> Server: header: SYN=1(request to establish a connection),seq=n(sequence number, 32-bit) Server -> client :SYN=1(server agrees to establish a connection),ACK= N +1(confirms receipt of the message), SEq = X (server sequence number),ACK=1 Client -> Server :ACK=1,SYN=0(starts sending the message), Ack =x+1(acknowledgement of receiving the message),seq=n+1Copy the code

  1. The first handshake indicates that the client is capable of sending messages
  2. The second handshake indicates that the server is capable of receiving and sending messages
  3. The third handshake indicates that the client is capable of receiving information

Four times to wave

Client -> server :FIN=1(requesting disconnection), SEQ = M Server -> Client :ACK=1 (message acknowledgement packet), ACK= M +1 Server -> Client :FIN=1(requesting disconnection), SEQ = B Client -> Server :ACK=1, ACK= B +1Copy the code

Browser render page

  1. Parsing HTML files to build DOM trees, parsing CSS to generate CSSOM trees. During the DOM tree construction, if JS is encountered, the DOM tree and CSSOM tree construction will be blocked. JS files will be loaded first, and DOM tree and CSSOM tree construction will continue after loading
  2. Combining DOM Tree and CSSOM Tree to construct Render Tree
  3. Layout: According to the generated render tree Layout, get node geometry information (location, size)
  4. Painting: The geometric information from genuine render trees and backflow gets the absolute pixels of nodes
  5. Display: Send the pixel to the GPU and Display it on the page

When a page is rendered, if JS manipulates a DOM node, the browser redraws or rearranges the page according to the size of the DOM manipulation by JS. By constructing a rendering tree, the visible DOM node and its corresponding style are combined. However, the exact position and size of the nodes in the viewport of the device need to be calculated. This extreme stage is the backflow and finally by constructing the render tree and backflow stage, we know which nodes are visible, as well as the style of the visible nodes and specific geometric information (position, size). Then we can convert each node of the render tree into an actual pixel on the screen, a phase called redraw