When the browser enters the URL, what is the rendering process of the web page?

Time:2021-4-17

When the browser enters the URL, what is the rendering process of the web page?
A simple answer:

  1. The browser generates the request and sends it to the server;
  2. After receiving the request, the server performs some actions or obtains some resources, and then sends the response back to the client;
  3. After receiving the response data, the browser parses the DOM tree and CSS tree, processes JavaScript, and builds the page.

If this is your answer in the interview, it is estimated that the interviewer’s expression is like this.
When the browser enters the URL, what is the rendering process of the web page?
Obviously, when the interviewer asks this question, the point should beThe browser generates the request and sends it to the serverHow it works. Then it has to be mentionedFour layer model of TCP / IPIt’s too late.
When the browser enters the URL, what is the rendering process of the web page?
As we all know, the four layer model of TCP / IP isApplication layer, transport layer, network layer, link layer. When using TCP / IP protocol cluster for network communication, the sender goes down from the application layer, while the receiver goes up to the application layer. Taking the HTTP sender as an example, when a request is initiated at the application layer, the packet will be divided by the transport layer (TCP), marked with serial number and port number on each packet, and then forwarded to the network layer. After the network layer adds the destination MAC address, it will be handed over to the link layer.

Now let’s go back to this question,What happens after the browser enters the URL?
When the browser enters the URL, what is the rendering process of the web page?
Think back to the data flow direction of the four tier model, and then, combined with the figure above, let’s try to answer this question.

  1. First, you need to resolve IP (application layer). What we input in the browser is generally a domain name, which is equivalent to a mapping of IP, so we need DNS to resolve the domain name to obtain the IP address. The figure below is a description of the DNS search process. The client will first find out whether there is a local cache of the corresponding domain name (browser cache, hosts file). If not, it will request the root DNS server or other authoritative DNS server.

When the browser enters the URL, what is the rendering process of the web page?

  1. Establish TCP request (transport layer). After getting the data packet of the upper layer, TCP will divide the request message into message segments and send the message through theThree handshakesEstablish a reliable connection.
  2. Send HTTP request. After the processing of the transport layer, it arrives at the network layer, searches the address of the other party through the IP protocol, and transmits while transferring. After arriving at the link layer, the packets are broadcast and sent in frames. Until the server receives the data, this process is the reverse of the above process, so I won’t go into details.
  3. Server processing. After the server performs some actions on the data processing, it sends the response data to the client through TCP. After the data is sent, it will send the response data to the clientfour-way handshake To close the TCP connection.
  4. Client response. The client will respond to the status returned by the server, such as redirection, decompression of zip compression, and so on.
  5. Browser rendering page. Parsing CSS rule tree and DOM tree, browser layout and rendering, processing JS.

more:The role of each layer in TCP / IP four layer model (protocol cluster)
reference resources:

  • Illustrated http
  • JavaScript Ninja script