With the increasingly high level of information, the Internet is no longer a difficult thing for anyone.

When we enter a website: www.zhihu.com/people/shan… “, hit Enter and a page opens up

So what happens from the time we enter a url to the time the page is displayed? As one of the classic interview questions, let’s go over them again.

Generally speaking, it can be divided into the following processes:

  • Enter url
  • The DNS
  • Establishing a TCP/IP connection
  • Sending an HTTP request
  • The server processes the request
  • The server returns an HTTP response
  • The browser renders the page and renders it
  • disconnect

So let’s expand on that

First, enter the URL (what is URL?)

When we want to open a page, it is easy to enter a url, such as (www.baidu.com).

A URL is a Uniform Resource Locator (URL)

Let’s take an example of a web address (no, we’re going to use the term URL) to explain its components:

http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
Copy the code

HTTP: HTTP is a Protocol, which indicates the Protocol used by the browser. There are HTTP, HTTPS, FTP, mailto, etc. HTTPS is the encrypted authentication version of HTTP (see diagram HTTP).

www.example.com: This is the Domain name that indicates which Web server is being requested, where WWW is the host name

80: This is a Port, which represents a “gate” for accessing resources on the Web server. If a Web server grants access to its resources using the standard port of the HTTP protocol (80 for HTTP and 443 for HTTPS), it is generally ignored. Otherwise, it is mandatory.

/path/to/myfile. HTML: Is the path to the file of the resource on the network server. In the early days of the Web, paths like this represented the location of physical files on the Web server.

? Key1 =value1&key2=value2: Is an additional parameter provided to the network server. These parameters are a list of key/value pairs separated by ampersand.

#SomewhereInTheDocument: is an Anchor of another part of the resource itself. An anchor represents a “bookmark” in a resource that gives the browser the direction of the content at that “bookmarked” location.

To summarize, a complete URL composition looks like this:

protocol://host.domain:port /path to the file/? parameters#anchor

Of course, when we actually input and operate, many things will be completed automatically, and many parts can be omitted, such as ports and protocols

Second, DNS resolution

Entering a URL is easy to understand, but what about domain name resolution? Why domain name resolution?

Before we answer these questions, let’s get familiar with one concept: IP addresses

The Internet Protocol Address (IP) is a unique Address provided by the Internet Protocol. It is a unified Address format. IP addresses mask physical address differences by assigning a logical address to each network and each host on the Internet.

For example, 192.168.59.0 is a host IP address

A computer can be assigned an IP address as well as a host name and domain name. But we usually use the domain name (www.baidu.com) to visit the website we want. Why? That’s because it’s much easier for us to understand, manipulate, and remember domain names than it is to use IP addresses. For computers, however, understanding domain names can be more complex and time-consuming.

More commonly, THE IP address is like the number of your house, the domain name is like the general name “XXX”, we prefer to remember the latter, but for the Courier, he does not know you, so it is more helpful for him to remember the former.

In order to solve the above problems, DNS service emerges as The Times require. It searches the corresponding IP address through the domain name we input, or reversely searches the domain name from the IP address.

The SO-CALLED DNS service is a protocol at the application layer like THE HTTP protocol. It provides the resolution service between domain names and IP addresses.

As can be seen from the figure, when we enter a domain name, the DNS service will find out the corresponding IP address according to the domain name and tell the computer, but how to find out the IP address? In other words, in what order did DNS find the domain name?

In fact, it comes in the following order

  1. Browser cache: The browser caches DNS records at a certain frequency to see if the domain name has been visited before.
  2. System cache: If you can’t find the DNS record you need in the browser cache, look for it in the operating system.
  3. Router cache: Your computer may have changed, but your router also has a DNS cache.
  4. ISP’s DNS server: AN ISP is a short name for an Internet service provider (China Mobile, China Telecom, etc.). An ISP has a special DNS server to handle DNS query requests.
  5. Root server: if the ISP’s DNS server cannot find the DNS server, it sends a recursive query to the root server (DNS server first asks the IP address of the root DNS server

3. Establish TCP/IP links

When given the IP address of the domain name, the browser initiates a TCP connection request to port 80/443 of the server’s WEB application on a random port. After the connection request to the server (except within the intermediate routing device, through a variety of local area network), into the network card, and then into the kernel of the TCP/IP protocol stack (used to identify the connection request, unsealed packets, one layer of peel away), and may go through the Netfilter firewall filtering (belong to the kernel module), Finally, the WEB application is reached, and the TCP/IP connection is finally established.

We talked about the basics of communication in the knowledge supplement. We learned that TCP is a transport layer, and as its name implies, it is a highly reliable protocol that facilitates transmission. It manages large chunks of data in the form of message segments, and at the same time, it can confirm whether the data is delivered to the other party. How exactly do you know that? Why is it highly reliable? This is what we call the three handshakes:

That is:

  1. The client sends a SYN query packet with the value of SYN=1 to the server. Seq is N, and the client enters the SYN_SENT state.
  2. The server replies with ACK=1 and SYN=1. The ack number is N +1, the query number seq is M, and the state is SYN_RCVD.
  3. After receiving this packet, the client sends an ACK packet with an ACK value of 1. The reply number is M +1 and the client enters the Established state.

Colloquially, they can be understood as a walkie-talkie call:

  1. You ready, man? I’m sending data? (SYN=1, seq=100)
  2. Sister, I received your inquiry and I’m ready, sister, send it. (ACK=1, ack=101. SYN=1, seq=200)
  3. All right, I’ll do it. (ACK=1, ack=201)

Why three handshakes ：

In His book Computer Network, Xie Xiren said that the purpose of “three-way handshake” was “to prevent the invalid connection request message segment from being suddenly transmitted to the server, resulting in errors”.

(Why is TCP three handshakes, not two or four? – mountain answer – zhihu www.zhihu.com/question/24…).

Feel the second is more essential to say, Xie Xiren teacher is more like an example, hope big guys know can give advice

4. Send HTTP requests

After the TCP three-way handshake is complete and data transmission is reliable, HTTP request packets are sent. The structure of the request message is shown as follows:

The request line

An example: GET http://www.example.com/dir/indec.html HTTP / 1.1

Methods that contain requests include GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS, and TRACE.

URL: created by < protocol > : //< host > : < port >/< path >? < parameters > composition

Protocol version: indicates the HTTP version

Header line: Indicates some information about the browser, server, or message body

Entity body: This field is generally not used

An example of a complete HTTP request message:

The server processes the request

The server responds to the browser with a 301 permanent redirect response so that the browser visits “www.google.com/” instead of “google.com/”.

Why does the server have to redirect rather than just send the content the user wants to see? One reason has to do with search engine rankings. If a page has two addresses, like www.yy.com/ and yy.com/, search engines will think they are two sites, resulting in fewer links per search and lower rankings. Search engines know what a 301 permanent redirect means, and will place all addresses with and without the WWW in the same ranking. There is also the cache friendliness of having different addresses. When a page has several names, it may appear in the cache several times.

1) The difference between 301 and 302.

Status code of 301 and 302 all redirection, said that after the browser to get the status code returned by the server will automatically jump to A new URL address, this address can be obtained from the response to the Location of the first (the effect of the user sees is he input address A moment into another address B) – this is that they have in common.

The difference between them is. 301 indicates that the resource at the old address A has been permanently removed (the resource is no longer accessible), and the search engine will swap the old url for the redirected url while fetching new content.

302 means that the resource at the old address A is still there (still accessible). This redirection is only A temporary jump from the old address A to address B. The search engine will grab the new content and save the old url. Good SEO302 in 301

2) Redirection reason:

(1) Website adjustment (such as changing the structure of web directory);

(2) The page is moved to a new address;

(3) Webpage extension changes (such as the application needs to change.php. Html or. SHTML).

In this case, if you do not do redirection, the old address in the user favorites or search engine database can only let visitors get a 404 page error message, the traffic is lost; Moreover some registered multiple domain name website, also need to access these domain name users automatically jump to the main site through redirection.

After all these steps, we finally send our HTTP request to the server. In fact, the previous redirect has already arrived at the server. So, how does the server handle our request?

After receiving A TCP packet on a fixed port, the backend processes the TCP connection, parses the HTTP protocol, and encapsulates the PACKET into an HTTP Request object for upper-layer use.

Some of the larger sites will send your requests to a reverse proxy server, because when the site is very heavily visited and the site is getting slower and slower, one server is no longer enough. The same application is deployed on multiple servers and requests from a large number of users are distributed across multiple machines. In this case, the client does not directly access a web application server through HTTP. Instead, Nginx first requests the application server, and Nginx then requests the application server, and then returns the result to the client. Here, Nginx acts as a reverse proxy server. It also has the advantage that if one of the servers goes down, users will not be affected as long as other servers are running properly.

Return the HTTP response

When the server receives our request, it will generate a response and return it to the client in the form of a response message, which is similar to the process of sending the request without further elaboration

The difference is that the beginning line of the response message is no longer a request line, but a status line

The status line contains: protocol version, status code, and a simple phrase that explains the status code

The status code rules are as follows: 1XX: indicates that the request has been received and continues to be processed. 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.

Common status codes: 202 (accepted), 400 (incorrect request), 404 (Not found)

HTTP status code _MUMucgq blog -CSDN blog

The browser renders the page and displays it

When the client gets the response text, the browser finally gets the HTML response and starts rendering the page

Follow these steps

  1. Parsing HTML tags to build a DOM tree
  2. Parse the CSS and build the CSSOM tree
  3. Combine DOM and CSSOM into a render tree
  4. The layout is carried out on the basis of rendering the tree, and the geometry of each node is calculated
  5. Draw each node to the screen (painting)

Two concepts:

Reflow: Each element in the DOM node exists as a box model, which requires the browser to calculate its position, size, etc., a process called relow

Repaint: After the box model position, size, and other properties such as color, font, etc. are determined, the browser begins to paint the content. This process is called repain

Reflow and Repain processes are very performance intensive, so we try to minimize reflow and Repaint.

Therefore, try to shape the style once and use absolute positioning for the animation to reduce reflow and DOM offline modification

Js blocks loading and parsing:

Browser in the process of parsing, if the request for external resources, such as images,iconfont,JS and so on. The browser will repeat the 1-6 process above to download the resource. The request process is asynchronous and does not affect the loading of the HTML document. However, when a JS file is encountered during the loading of the document, the HTML document suspends the rendering process, not only until the LOADING of the JS file in the document is complete, but also until the parsing is completed, and the HTML rendering process will continue. 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.

Disconnect

  1. The client sends a FIN telling the server that it wants to close the connection.
  2. The server receives the FIN and sends back an ACK.
  3. The server notifies the application to close the network connection, and notifies the server when the application is closed. The server sends a FIN to the client.
  4. The client sent an ACK packet for confirmation. Procedure

Why do you wave in four steps ：

This is because when the server SOCKET in LISTEN receives a SYN packet from the client for establishing a connection, it can send ACK and SYN in one packet. ACK responds and SYN synchronizes. However, when the server receives a FIN packet notification from the client, it can only send an ACK message saying, “OH, I see.” And then notify the application. Only after the application completes sending all data and determines that it is ready to terminate can the server send a FIN to tell the client that it is ready to disconnect. In this step, ACK packets and FIN packets must be sent separately.

Knowledge supplement

Communication basics

To better understand this section, it is necessary to briefly explain some network basics.

Commonly used networks are implemented on the basis of the TCP/IP protocol family, including the HTTP protocol that we use as a subset of it. We know that communication between computers and network devices must be based on the same methods (how data is transferred, who initiates the communication, etc.), and that defining the same methods requires a set of rules, namely protocols (such as HTTP).

The TCP/IP protocol family is a collection of such protocols

TCP/IP has only four layers: application layer, transport layer, network layer, and data link layer

  • Application layer: Determines the activities when providing application services to users. TCP/IP stores some of these application services, such as DNS, FTP, HTTP, and so on
  • Transport layer: Provides data transfer between two computers in a network connection. There are two protocols (TCP and UDP) at this layer.
  • Network layer: Used to process packets flowing over the network and specify the transmission route for the data to reach the other computer
  • Data link layer: The hardware part, such as network adapter, driver, optical fiber and other physical visible parts, all the hardware that can be seen and touched belong to this layer

The benefits of layering are obvious: the layers are independent, flexible, and easy to maintain

So when we want to open a web page, probably experienced a process?

As shown below:

When the TCP/IP protocol family is used to communicate with each other, the sender sends commands from the application layer and goes down, while the receiver receives data from the data link layer and goes up.

Let’s say I want to open a Zhihu page, i.e. send an HTTP request:

Client:

  1. The application layer (where the HTTP protocol is) makes HTTP requests
  2. To facilitate transmission, the transport layer (TCP) divides the HTTP request packets and marks the serial number and port number of each part with its own mark
  3. The network layer (IP protocol) adds the MAC address as the communication destination and marks its own mark
  4. The data link layer sends the request and marks its own mark

Server:

  1. The data link layer receives data and removes tokens
  2. The network layer reads and removes tokens
  3. The transport layer reads and removes tokens
  4. The application layer reads the final request

reference

  • TCP three-way handshake four-way wave Summary (process, FAQs, attacks that can occur, defense methods)
  • Typical front-end interview question: What happens from entering the URL to loading the page?
  • What happens when you go from URL input to page presentation?
  • Detailed process from entering URL to page presentation
  • Computer Networking (7th Ed.) – Xie Xiren. PDF
  • The illustration HTTP. PDF
  • Valley of hungry people