What happens when the "Go" browser enters a URL

Turn from: Http://www.cnblogs.com/webdeve/p/7865520.html Abstract:

1.DNS domain name resolution; 2. Establish a TCP connection, 3. Send an HTTP request, 4. The server processes the request, 5. Return the response result; 6. Close the TCP connection; 7. browser parsing html;8. browser layout rendering;

Enter URL

When we enter the URL in the browser and return, everything starts here.

First, DNS domain name resolution

We enter the URL in the browser, in fact, is to request the server we want the content of the page, all the browser first to confirm that the domain name of the corresponding server where. The work of resolving the domain name to the corresponding server IP address is done by the DNS server.

After the client receives the domain address you entered, it first to find the local Hosts file, check if there is a corresponding domain name, IP correspondence in the file, if there is, then send a request to its IP address, if not, then go to the DNS server. General users rarely go to edit the Hosts file.

DNS Server Hierarchy

The browser client sends a DNS query message to the local DNS server that contains the domain name www.cnblogs.com. The local DNS server forwards the query message to the root DNS server, the root DNS server notices its COM suffix, and returns the IP address of the COMDNS server to the local DNS server. The local DNS server sends a query request to the COMDNS server again, and the COMDNS server notices its www.cnblogs.com suffix and responds with the IP address of the authoritative DNS server that owns the domain name. Finally, the local DNS server sends a response message to the client that contains the IP address of the www.cnblogs.com.

The client-to-local server belongs to a recursive query , and the interaction between DNS servers is an iterative query .

Under normal circumstances, the cache of the local DNS server already has the address of the COMDNS server, so it is not necessary to request a root domain server.

Second, establish a TCP link

After a meal of trouble finally get the server IP, the next step is naturally linked to the server. For the client-server TCP link, it is necessary to say that the "three-time handshake."

Three-time handshake

The client sends a packet with a SYN flag to the server, and after the server receives a packet with the SYN/ACK flag to convey the confirmation message, the client then callbacks a packet with an ACK flag, which represents the end of the handshake, and the connection was successful.

You can also understand this:

Client: "Hello, not at home, have you express." ”

Service side: "In the, sent on the line." ”

Client: "Good." ”

Third, send HTTP request

Once you have established a connection with the server, you can initiate a request to the server. Here we first look at the structure of the request message (e.g.):

Request message

View the header of the message in the browser (for example in Google Chrome):

The request line includes the request method, URI, and HTTP version. The header field passes important information, including the Request header field, the Generic header field, and the Entity header field. We can see the specific information of the request sent from the message. Specific to each header field, here does not do too much elaboration.

Iv. Server processing Requests

Requests are processed by the Web server (exactly the HTTP server) after the server receives the request, such as Apache, Ngnix, IIS, and so on. The Web server resolves user requests, knows which resource files need to be dispatched, processes user requests and parameters through the corresponding resource files, invokes database information, and returns the results to the browser client via the Web server.

Server processing Request v. Return response result

In HTTP, there is a response to the request, even if it is an error message. Here we also look at the composition of the response message:

Response message

In response to the result there will be an HTTP status code, such as the 200, 301, 404, 500, etc. we are familiar with. Through this status code we can know whether the server-side processing is normal, and can understand the specific error.

The status code consists of 3 digits and a reason phrase. According to the first number, the status code can be divided into five categories:

Status Code category VI, closing TCP connections

To avoid resource consumption and loss between the server and the client, either party can initiate a shutdown request when there is no request or response from both parties. Similar to the 3-time handshake for creating a TCP connection, shutting down a TCP connection requires 4 handshakes.

4-Time handshake

You can understand this:

Client: "Brother, I have no data to pass, let's close the connection." ”

Service side: "Roger, I'll see if I have any data on my side." ”

Service side: "Brother, I also have no data to pass you, we can close the connection." ”

Client: "Good." ”

Seven, browser parsing HTML

To be precise, the browser needs to load parse not only HTML, but also CSS, JS. And also load other media resources like pictures, videos, and more.

The browser parses the HTML, generates a DOM tree, parses the CSS, generates a CSS rule tree, and generates a render tree from the DOM tree and the CSS rule tree. Unlike the DOM tree, the render tree has no head, no display for none, and no unnecessary nodes.

Note that the browser parsing process is not a concatenation, such as parsing the CSS, you can continue to load parsing HTML, but in parsing the execution of JS script, will stop parsing the subsequent HTML, which will appear blocking problems, about the JS blocking related issues, here is not too much elaboration, the following will be a separate opening to explain.

Eight, browser layout rendering

Based on the rendering tree layout, the CSS styles are computed, that is, the geometry information such as the size and position of each node in the page. HTML default is streaming layout, CSS and JS will break this layout, change the DOM's appearance style and size and position. There are two important concepts to be mentioned: Replaint and reflow.

Replaint: Part of the screen is redrawn without affecting the overall layout, such as the background color of a CSS, but the geometry and position of the element are unchanged.

Reflow: means that the geometry of the component has changed, and we need to re-validate and calculate the render tree. is part or all of the rendering tree has changed. This is reflow, or layout.

So we should try to reduce reflow and replaint, and I think that's one of the reasons why the table layout is rarely useful now.

Finally, the browser draws each node and presents the page to the user.

Summarize

This article systematically describes the overall flow from the browser from the input domain name to the final page presentation. Space limit, each step of this article is actually not comprehensive, so I will be alone on the domain name resolution, HTTP request/response, browser parsing, rendering and other content alone to explain, interested friends can also pay attention to my personal blog.

What happens when the "Go" browser enters a URL