Briefly talk about the browser’s process from entering a URL to rendering a page

This is also a classic interview question, whether the front-end or back-end may be encountered, knowledge points are relatively more, more comprehensive investigation. Recently also read a lot of browser-related articles, combined, here is a simple summary of combing. In the meantime, thank the browser for being a great invention.

List of knowledge points

Here is a simple and crude flowchart I drew:

The process is divided into the following steps:

  • DNS resolution: Resolves domain names into IP addresses
  • TCP Connection establishment: TCP three-way handshake
  • Sending an HTTP request
  • The server processes and responds to the message
  • The browser parses and renders the page
  • Disconnection: TCP ends the connection

Related knowledge:

URL

DNS resolution, IP address

TCP establishes a connection and shakes hands three times

Server processing, HTTP requests, status codes

Browser rendering

TCP Connection End

What is a URL?

Uniform Resource Locator (URL) is a Uniform Resource Locator (URL) used to locate resources on the Internet.

Generally follow the following grammar rules:

scheme://host.domain:port/path/filename

Each part is explained as follows:

  • Scheme – Defines the type of Internet service. Common protocols include HTTP, HTTPS, FTP, and File. The most common type is HTTP, and HTTPS is used for encrypted network transmission.
  • Host – Domain host (WWW is the default host for HTTP)
  • Domain – Defines Internet domain names, such as baodu.com
  • Port – Defines the port number on the host (the default HTTP port number is 80)
  • Path – Defines the path on the server (if omitted, the document must be at the root of the site)
  • Filename – Defines the name of the document/resource

Domain name Resolution (DNS)

Why domain name resolution? The browser does not find the server directly by domain name, but by IP address. Of course, can also be directly IP address to access, but to human memory habits to remember the IP address of each website… Well, I can only wish you happiness.

IP address: AN IP address is a 32-bit binary number, for example, 127.0.0.1 is the local IP address. Its function is to facilitate memorization and communication of a set of server addresses. A domain name is an alias for an IP address. Take a convenient example: for example, a location with longitude: 113.35 latitude: 23.12, which is very difficult to remember, but there is a place named Guangzhou Tianhe, which is very consistent with human cognition. The latitude and longitude in this example are equivalent to IP addresses, and Guangzhou Tianhe is equivalent to domain names.

What is Domain Name Resolution the DNS provides the service of searching IP addresses by domain names or reverse-searching domain names from IP addresses. DNS is a web server. Our domain name resolution is simply a record of information on DNS.

For example, xiaoyexiang.com 120.77.215.71 (external SERVER IP address) 80 (server port number)Copy the code

TCP three-way handshake

Before sending data, the client initiates a TCP three-way handshake to synchronize the serial number and confirmation number of the client and server, and exchange TCP window size information.

There are also many easy to understand processes on the Internet, and I quote them directly:

  1. The TCP three-way handshake process is as follows:
    • The client sends a packet with SYN=1, Seq=X to the server port (the first handshake, initiated by the browser, tells the server I’m going to send the request)
    • The server sends back a response with SYN=1, ACK=X+1, Seq=Y as confirmation (second handshake, initiated by the server, telling the browser I’m ready to accept it, send it now)
    • The client sends back a packet with ACK=Y+1, Seq=Z, which means “handshake over” (the third handshake, sent by the browser, tells the server I’m sending soon, get ready to accept).
  2. Why do you need three handshakes? According to Xie Xiren’s book Computer Network, the purpose of “three-way handshake” is to “prevent the invalid connection request message segment from being suddenly transmitted to the server, thus causing errors” **.

4. Send HTTP requests to the server

After the TCP connection is established, HTTP request packets are sent to the Web server.

  • There are eight request methods: GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS, and TRACE.
  • The URL is the requested address, which is specified by < protocol > : //< host > : < port >/< path >? < parameters > composition
  • Protocol version Indicates the HTTP version number
HTML HTTP/1.1 // In the preceding code, POST indicates the request method, /chapter17/user. HTML indicates the URL, and HTTP/1.1 indicates the protocol and the protocol version. The popular version is Http1.1Copy the code

A typical HTTP request header usually includes request methods, such as GET or POST, and less common ones include PUT and DELETE, HEAD, OPTION and TRACE. The browser only makes GET or POST requests.

The server processes the request and returns HTTP packets

Note here: the user may enter “baidu.com” instead of “HTTPS :/… See article.

After receiving the request, the server processes the request and sends the HTTP response packet

** The response line contains: protocol version, status code, status code description **

The status code rules are as follows:

  • 1XX: Indicating message – indicating that the request has been received and processing continues.
  • 2xx: Success: The request is successfully received, understood, or accepted.
  • 3xx: Redirect – Further action must be taken to complete the request.
  • 4XX: Client error – The request has a syntax error or the request cannot be implemented.
  • 5xx: Server side error — the server failed to fulfill a valid request.

I don’t know much about server processing here

The browser parses the rendered page

Without too much explanation, I think the Internet is easier to understand

Now that the browser has the response text HTML, let’s talk about the browser rendering mechanism

There are five steps that browsers take to parse a rendered page:

  • Parse out the DOM tree from the HTML
  • Generates a CSS rule tree based on CSS parsing
  • Combine DOM tree and CSS rule tree to generate render tree
  • Calculate the information for each node according to the render tree
  • Draw the page based on the calculated information
  1. Parse the DOM tree according to HTML
    • According to the content of HTML, tags are parsed into a DOM tree according to the structure. The DOM tree parsing process is a depth-first traversal. That is, all children of the current node are built before the next sibling node is built.
    • If a script tag is encountered during the process of reading an HTML document and building a DOM tree, the building of the DOM tree is suspended until the script is executed.
  2. Generates a CSS rule tree based on CSS parsing
    • Js execution is paused while the CSS rule tree is parsed until the CSS rule tree is ready.
    • Browsers do not render until the CSS rule tree is generated.
  3. Combine DOM tree and CSS rule tree to generate render tree
    • After the DOM tree and CSS rule tree are all ready, the browser starts building the render tree.
    • Simplifying CSS can also speed up the building of CSS rule trees, resulting in faster pages.
  4. Calculate the information for each node from the render tree (layout)
    • Layout: Calculates the position and size of each render object from the render object information in the render tree
    • Backflow: After the layout is complete, it is found that some part of the layout has changed and needs to be rerendered.
  5. Draw the page based on the calculated information
    • In the paint phase, the system traverses the render tree and calls the renderer’s “paint” method to display the renderer’s contents on the screen.
    • Redraw: Attributes such as the background color, text color, etc. of an element that do not affect the layout around or inside the element will only cause the browser to redraw.
    • Backflow: If the size of an element changes, the render tree needs to be recalculated and re-rendered.

Disconnect

When data transfer is complete, you need to disconnect the TCP connection and initiate the TCP wave four times.

  • If the sender sends a packet to the passive party, such as Fin, Ack, or Seq, no data is transmitted. And enter the FIN_WAIT_1 state. (First wave: it is initiated by the browser and sent to the server. I have sent the request message. You are ready to close it.)
  • The passive sends Ack and Seq packets, indicating that it agrees to close the request. The host initiator enters the FIN_WAIT_2 state. (Second wave: from the server, telling the browser that I’ve received my request and I’m ready to close, so are you)
  • The passive sends a Fin, Ack, or Seq packet to the initiator to close the connection. And enter the LAST_ACK state. (Third wave: initiated by the server to tell the browser that I have sent the response message and you are ready to close it)
  • The packet segment, such as Ack and Seq, is sent to the passive party. Then enter the wait TIME_WAIT state. The passive party closes the connection after receiving the packet segment from the initiator. If the initiator waits for a certain period of time and does not receive a reply, the system shuts down normally. (Fourth wave: initiated by the browser to tell the server, I have received the response message, I am ready to close, you are ready to do the same)

8. The browser makes an asynchronous request

In the web2.0 era, the client continues to communicate with the server even after the page has been rendered, a pattern known as AJAX, which stands for “Asynchronous JavaScript And XML.”

JS parsing is done by the JS parsing engine in the browser. JS is single-threaded, that is, only one thing can be done at a time, and all tasks need to be queued so that the first task can finish before the next one can start. However, there are some tasks that are time-consuming, such as IO reads and writes, so you need a mechanism to do the synchronous and asynchronous tasks first. The execution mechanism of JS can be regarded as a main thread plus a task queue. Synchronous tasks are tasks that are executed on the main thread, and asynchronous tasks are tasks that are executed on the task queue. All synchronization tasks are executed on the main thread, forming an execution stack. An asynchronous task will place an event in the task queue when it has a result. When a script runs, it first runs the execution stack in sequence, then extracts the events from the task queue and runs the tasks in the task queue. This process is repeated constantly, so it is also called Event loop.

Browser in the parsing process, if there are any external resources request, the request process is asynchronous, will not affect the HTML document to load, but when encountered in the process of document load JS file, HTML document will hang up the rendering process, not only have to wait until the document JS files loaded wait for parsing is done, will continue to HTML rendering process. The reason is that JS may modify the DOM structure, which means that all subsequent resource downloads are unnecessary before JS execution is completed, which is the fundamental reason why JS blocks subsequent resource downloads. Loading CSS files does not affect the loading of JS files, but it does affect the execution of JS files. The browser must ensure that the CSS file has been downloaded and loaded before executing the JS code.

Contents refer to online articles, only for personal study:

www.beiliangshizi.com/441/

Github.com/ljianshu/Bl…