Enter the URL in the browser address bar, press ENTER after what happened?

1. Background information

What happens when you enter a URL in the browser's address bar and return to it? This is a classic face test, but also a complex topic, involving a lot of things, different software developers have different answers to this question, for some of them can be unlimited to delve into, today we will focus on the Web front-end to see what happened.

  2. Knowledge Analysis

Basic Flow:

① Querying IP addresses

② establish a TCP connection, access the server

③ Browser initiates an HTTP request

④ Server background operation and make HTTP response

Parsing and rendering of ⑤ Web pages

3. Frequently Asked Questions

Specific steps?

4. SolutionQuerying IP addresses

The ① browser resolves the domain name in the URL.

② queries the DNS cache of the browser.

There is no DNS cache in the ③ browser, the lookup local client Hosts file has no corresponding IP address.

None in ④hosts, the lookup of the local DNS server (the provider-provided DNS server) has no corresponding DNS cache.

⑤ If the local DNS does not have a DNS cache, the root server is queried for recursive lookups.

⑥ recursive lookups start with a top-level domain name (such as. com), narrowing down the scope, and eventually the client obtains an IP address.

TCP connections and HTTP connections

The ①http protocol is built on the TCP protocol, and before HTTP requests, a TCP connection is required to form a stable channel for the client to the server. Commonly known as TCP three-time handshake.

After the ②TCP connection is complete, the HTTP request begins, and the request is made in a variety of ways, common to get,post, and so on.

The ③http request contains the request header, which may also contain the request body two parts, the request header contains the information we want to the operation of the request file, the request body contains the parameters passed to the background.

After the ④ server receives the HTTP request, the background starts to work, such as load balancing, cross-domain, and so on, here is the backend work.

The ⑤ file is processed, the response packet is generated, and the response contains two parts, the response header and the corresponding body, and the response body is the file we requested.

⑥ is transmitted over the network, the file is downloaded to the local client and the client starts loading.

HTML rendering

After the ① client browser loads the HTML file, the HTML is parsed from top to bottom into the DOM tree (DOM trees).

② encounters a CSS file, the URL in the CSS initiates an HTTP request.

③ This is the second HTTP request, because the http1.1 protocol adds the Connection:keep-alive declaration, so the TCP connection is not closed and can be reused.

The ④http connection is a stateless connection, and the client and server side need to re-initiate the request-response.

In the process of requesting the CSS, the parser continues parsing the HTML and then to the script tag.

⑤ because script may change the DOM structure, the parser stops generating the DOM tree, the parser is blocked by JS, waits for the JS file to initiate an HTTP request, and then loads. This is the third HTTP request. After the completion of JS execution, the parser continues to parse.

⑥ because the CSS file may affect the execution result of the JS file, it is necessary to wait until the CSS file is loaded and then executed.

After the ⑦ browser receives the CSS file, it begins parsing the CSS file for the Cssom tree (CSS Rule trees).

After the ⑧cssom tree is generated, the DOM tree is combined with the CSS Rule tree to create a render tree.

The ⑨render tree is blocked by the CSS file, the rendering tree is created, the layout is drawn, the attributes (position, width, size, etc.) of the nodes in the render tree are plotted, and the page renders the information.

⑩ continue to parse the edge rendering, encountered another JS file, JS file after the execution of changes in the DOM tree, the rendering tree from the changed DOM began to render again.

? continue to render downward, encounter an IMG tag, the browser initiates an HTTP request, does not wait for the IMG load to complete, continues to render downward, and then re-renders this section.

? The DOM tree encounters an HTML end tag, stops parsing, and then renders the end.

5. Code Combat

6. Expand Your ThinkingWhat are the methods of website optimization?

① Reduce DNS queries: Add the IP information of the server domain name to the local host file.

② reduce the number of HTTP requests, for pictures using Sprite chart, for HTML files and CSS files, JS files are merged separately.

③ reduce download time: Compress pictures, use compression to compress the space in the document, delete extra statements and comments, create your own JS thin library and thin frame, use local browser cache.

④ pre-render start time: Place CSS links in the HTML header.

⑤ reduces the blocking of the parser: Place the JS link on the body tail.

7. References

Reference one: HTTP://WWW.JIANSHU.COM/P/5B069AE8C4F2

Reference two: http://blog.csdn.net/android1514/article/details/51281494

Xiaoyudesu
Links: http://www.jianshu.com/p/69c2cf84b407
Source: Pinterest
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

Enter the URL in the browser address bar, press ENTER after what happened?