This question is a classic one, and it is one of the most frequently asked interview questions in front of the interview. Although it is a simple sentence, it contains a lot of water, and contains a lot of knowledge.

Roughly divided into

  • 1. DNS resolution
  • 2. The TCP three-way handshake establishes the connection
  • 3. HTTP initiates the request
  • 4. The server processes the request and returns a response packet
  • 5. The browser renders the DOM tree
  • 6. Disconnect the TCP connection and explain the request process

1. DNS resolution

Let’s look at why DNS was born, and then we’ll know what it does.

When you visit a website, it is usually through a domain name, not through an IP address. Because the IP address is a string of numbers, compared to the domain name (English letters + numbers) more consistent with human memory habits.

But it is also relatively difficult for computers to understand domain names (letters plus numbers), because computers are better at processing strings of numbers.

To solve this problem. The DNS service application is created. The DNS protocol service provides the service of looking up the IP address by the domain name or reversely looking up the domain name from the IP address. As shown in figure

Detailed introduction to DNS resolution steps:

  • 1, first look at the local DNS (hosts). If the corresponding domain name resolution is found, then execute the TCP three-way handshake. If not, execute 2.
  • 2, go to the DNS service of the router to find the corresponding IP address, if the corresponding domain name resolution is found, then execute TCP three-way handshake, if not, then execute 3.
  • 3, go to the DNS service of the proxy server to find the corresponding IP address, if the corresponding domain name resolution is found, then execute TCP three-way handshake, if not, then execute 4.
  • 4. If the proxy server is not found, it will go to the Internet service provider (ISP) to find the proxy server. Until it is found, it will execute the TCP three-way handshake.

If it is found on the router, or proxy server, or network service provider, for the IP, it will notify the previous step to cache the IP (DNS cache – optimization item) for the next use.

Let’s first look at what the TCP protocol is, TCP protocol in the TCP/IP protocol for the second layer, transport layer, the following introduction of TCP/IP protocol layer 4.

  • 1. Application layer (to which HTTP protocol belongs)

    Function: Provides users with application service communication activities.

    Common application services are stored in the TCP/IP protocol family. For example, File Transfer Protocol (FTP) and Domain Name System (DNS) services are two of them.

  • 2. Transport layer (to which TCP belongs),

    Function: Provides data transmission between two computers over the Internet

  • 3. Network layer (IP protocol belongs to the change layer)

    Function: It is used to process the data packet flowing on the network. The data packet is the smallest unit of transmission on the network. This layer specifies what path to use to reach the other party’s computer and then pass the data packet to the other party

  • 4. Link layer

    Function: The part used to connect the Network hardware, including the control operating system, the device drive of the hardware, NIC (Network Interface Card, namely Network adapter), and the physical visible part such as optical fiber (also include connector and all transmission media). Hardware categories are within the scope of the link layer.

TCP/IP layering is a very good way to deal with it. It is just like the division of labor among human beings. The emerging problems should be dealt with separately, or if a layer needs to be replaced, it should be replaced directly instead of the whole layer. Or to add a new layer of protocols between the two layers, as long as it can handle the interfaces of each layer, can be added.

For example, HTTPS adds a layer of SSL between the application layer and the transport layer.

See figure

When sending data, the sender will add the header information of the owning layer. On the contrary, when receiving data, each layer will remove the header information of this layer.

Let’s take a look at what the TRANSPORT layer of the TCP protocol does and how it actually interacts. The transport layer subdivides two functions

  • 1 Provision of the byte stream service The byte stream service refers to that the TCP protocol divides the request body of big data into packets in segments for transmission

  • 2 Ensure that data can reach the target TCP To ensure that data is transmitted to the target, the three-way handshake is adopted.

    The handshake process uses TCP flags (FLG) SYN–(synchronize) and ACK– (ackonwledgement). The sender first sends a packet with the SYN–(synchronize)flag to the target server. When the client receives a packet with a SYN– (synchronize) /ACK–(ackonwledgement)flag, it sends back an ACK(ackonwledgement) flag indicating that the handshake is successful. If there is a disconnect, TCP will send it in the same order, and this is what a three-way handshake really looks like. See below

After the TCP three-way handshake is established, one or more data requests are subsequently made. The request is in two parts

  • 1 request header is divided into two parts of the header, which has a lot of detailed content, interested can click on the following article

    • Request Header Field — One of the four Header Fields
    • 2 general First “General First Field — One of the Four First Fields”

  • 2 Request body, used to carry data, the client sends the data carrier to the server. It may contain requests from the client or requests from the server. As shown in figure

Request header

Request body

The response body is also divided into two parts.

  • 1. The response header is divided as follows:

    • 1 response Header field — One of the Four Header Fields

    • Entity Header Field — One of the Four Header Fields

    • 3 Part of the response status code, divided into five types

      The response status codes are 1XX, 2XX, and 5XX

      About the status code of 4XX

      Frequently asked interview regarding response status code 3XX

Response headers

Response body

5 Browser Rendering

  • Process HTML tags and build the DOM tree.
  • 2 process CSS tags and build CSSOM trees.
  • Merge DOM and CSSOM into one render tree.
  • 4 Layout according to the render tree to calculate the geometric information of each node.
  • 5 Draw each node to the screen.

Our demo page may look simple, but it actually requires quite a bit of work. If the DOM or CSSOM is modified, you can only perform all of the above steps one more time to determine which pixels need to be rerendered on the screen.

By default, CSS is considered a blocking rendering resource, which means the browser will not render any processed content until CSSOM is built

To optimize the

  • 1 CSS is a resource that blocks rendering. It needs to be downloaded to the client as soon as possible to shorten the first render time.

  • < font style =” width: 40em)” style =” text-align: center;”

  • < font style =” width: 40em)” style =” text-align: center;”

JavaScript allows us to modify every aspect of a web page: content, style, and how it responds to user interaction. However, JavaScript can also prevent DOM building and slow down web page rendering.

To optimize the

  • 1 allows your JavaScript to asynchronously execute “< script SRC =”app.js” async>”
  • 2 and remove any unnecessary JavaScript from the critical render path
  • < script SRC =”app34534534543.js” async>”

6. Disconnect the TCP connection and explain the request process

  • 1 After data transmission is complete, the server sets the FIN control bit to 1 and requests to stop the TCP connection
  • 2 After receiving the FIN, the client responds by confirming that the TCP connection in this direction is closed and setting ACK to 1
  • 3 The client makes a reverse closing request and sets FIN to 1
  • 4 The server confirms the request from the client, sets ACK to 1, and closes both sides.

Both the client and the server can initiate the disconnection

Due to the limited level of personal understanding, can only provide so many production examination, there are deficiencies can be put forward, will be modified in time, later or continue to add