1. DNS resolution: Resolves a domain name into an IP address
  2. TCP connection: TCP three-way handshake
  3. Sending an HTTP request
  4. The server processes the request and returns HTTP packets
  5. The browser parses the rendered page
  6. Disconnect: TCP wave four times

DNS resolution (domain name resolution)

1. What is a URL?

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

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 – Define the Internet domain name, such as w3school.com.cn
  • 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 web site).
  • Filename – Defines the name of the document/resource

2. What is the IP address?

An IP Address is an Internet protocol Address, short for IP Address. It is a unified address format provided by the IP protocol. It allocates a logical address to every network and every host on the Internet, thus shielding physical address differences. An IP address is a 32-bit binary number, for example, 127.0.0.1 is the local IP address.

A domain name is the equivalent of an IP address a pretender in disguise, wearing a mask. Its function is to facilitate memorization and communication of a set of server addresses.

3. 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.

Example: baidu.com 220.114.23.56 (Server external IP address) 80 (Server port number)

4. How does the browser query the IP address of the URL based on the domain name?

  • Browser cache: The browser caches DNS records at a certain frequency.
  • Operating system cache: If you can’t find the DNS record you need in the browser cache, look for it in the operating system.
  • Route cache: Routers also have DNS caches.
  • DNS server of an ISP: AN ISP has a dedicated DNS server to respond to DNS query requests.
  • Root server: If the ISP’s DNS server cannot be found, it sends a recursive query to the root server (DNS server first asks the IP address of the root DNS server.

5. Summary

The browser sends the domain name to the DNS server. The DNS server searches for the IP address corresponding to the domain name and returns the IP address to the browser. The browser injects the IP address into the protocol and sends the request parameters to the corresponding server.

TCP three-way handshake

1. Basic NETWORK TCP/IP

  • The application layer

The application layer determines the activities of communication when providing application services to users. The TCP/IP protocol family stores various common application services. For example, File Transfer Protocol (FTP) and Domain Name System (DNS), HTTP is also at this layer.

  • The transport layer

Transport layer Provides data transfer between two computers in a network connection to the upper application layer. At the transport layer, there are two different protocols: Transmission Control Protocol (TCP) and User Data Protocol (UDP).

  • The network layer

The network layer is used to handle packets of data as they flow across the network. A packet is the smallest unit of data that can be transmitted over a network. This layer defines the path (the so-called transmission route) through which the packet can reach each other’s computers, rather than sending it to each other.

  • Link layer (also known as data link layer, network interface layer)

The part of the hardware used to handle the connected network. Physical visible parts include the control operating system (OS), device driver, Network Interface Card (NIC), and optical fiber.

2. Send the HTTP process

  1. The client makes an HTTP request at the application layer (HTTP protocol) to view a Web page
  2. To facilitate transmission, the transport layer (TCP) divides the data (HTTP request packets) received from the application layer, marks the serial number and port number of each packet, and forwards the packets to the network layer
  3. At the network layer (IP Protocol), MAC addresses are added as communication destinations and forwarded to the link layer. This way, the communication request to the network is ready
  4. The server at the receiving end receives data at the link layer and sends the data to the upper layer in sequence, all the way to the application layer. HTTP requests sent by clients are received only when they are transmitted to the application layer

3. TCP three-way handshake

TCP requires a three-way handshake in case an error occurs when an invalid connection request packet segment is suddenly sent to the server.

  • 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).

Send an HTTP request

A request packet consists of a request line, a request header, and a request body

1. The request

The request line contains the request method, URL, and protocol version.

  • 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

POST/chapter17 / user. HTTP / 1.1 HTML

2. Request header

The request header contains additional information about the request and consists of a keyword/value pair, one on each line, separated by colons (:).

The request header notifies the server that there is information about the client request. It contains a lot of useful information about the client environment and the request body. For example, Host indicates the Host name and virtual Host. Connection,HTTP/1.1 added to use keepalive, a Connection can send more than one request; User-agent, request originator, compatibility, and customization requirements.

3. Request body

The request body can hold data for multiple request parameters, including carriage returns, newlines, and request data. Not all requests have request data.

The server processes the request and returns HTTP packets

1. The server

The server is a high-performance computer in the network environment. It listens to the service requests submitted by other computers (clients) on the network and provides corresponding services, such as web service, file download service, mail service and video service. The main function of the client is to browse the web, watch videos, listen to music and so on, which are completely different. The application that handles requests, the Web Server, is installed on each server. Common Web server products include Apache, Nginx, IIS, or Lighttpd.

Web server plays the role of control. For the requests sent by different users, it will combine configuration files and entrust different requests to the programs that process the corresponding requests on the server for processing (such as CGI scripts, JSP scripts, Servlets, ASP scripts, server-side JavaScript, Or some other server-side technology, etc.), and returns the result of daemon processing as a response.

2.MVC background processing stage

  • View

It is provided to the user’s operation interface, is the shell of the program.

  • Controller

According to the user input instructions from the “view layer”, select the data in the “model layer”, and then perform corresponding operations on it to produce the final result. The controller is a manager who receives requests from the view and decides which model artifact to call to process the request, and then determines which view to use to display the data returned by the model process.

  • Model

The model is mainly responsible for data interaction. ** Of the three parts of MVC, the model has the most processing tasks. A model can provide data for multiple views.

At first, the request sent by the browser passes through the controller, which performs logical processing and request distribution. Then, the model will be called. At this stage, the model will obtain data from Redis DB and MySQL, render the page after obtaining the data, and the response information will be returned to the client in the form of response message. Finally, the browser uses a rendering engine to render the web page to the user.

3. HTTP response packets

A response packet consists of a request line, a header, and a body.

  • Response line

The response line contains the protocol version, status code, and status code description:

  • 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.
  • In response to the head

The response header contains additional information about the response packet and consists of a name/value pair

  • In response to the body

The response body contains carriage return characters, newlines, and response return data. Not all response messages have response data

The browser parses the 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 based on 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. Generate a CSS rule tree based on CSS resolution

  • 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. Generate a rendering tree by combining DOM tree and CSS rule 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 of each node according to the rendering tree

  • 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)