What happens between entering the URL and loading the page? _html/css_WEB-ITnose

This question is a common question. Although there are answers everywhere on Baidu, I still hope I can summarize it.

There are many answers nowadays, all starting from the hardware, such as keyboard response or touch screen response, and then CPU processing to the OS kernel and so on. This is not the focus here. If interested students can give you a portal: FEX--what happens in the process from entering the URL to the completion of page loading?

Parse url

First of all, many browsers will do preprocessing, especially Chrome. Preprocessing means establishing a TCP link or rendering in advance by analyzing the URL you are about to visit. The user experience is that the page loads instantly after entering the URL. No wonder Chrome gives people a fast experience.

But not all strings entered in the browser are valid URLs. For example, we sometimes like to enter Chinese characters directly in the address box to call the browser's default search engine. Therefore, after pressing Enter, the URL will be effectively verified. If it conforms to the http protocol, it will be processed according to the Web.

Once we complete the input, the browser will check the cache and make corresponding changes to the requested information.

HTTP request

1. If the address is accessed through a domain name, then it will first resolve the address into an IP address through DNS. Of course, DNS also has caches, browser caches, OS caches, router caches, and ISP caches. If it is not found, it will continue to search for the higher-level DNS server through recursion until it succeeds or fails.
   
2. If the address does not contain a port number, the port number will be added by default according to the protocol. For example, the http protocol is port 80, while the https protocol is port 443.
   

3. Establish a TCP connection and send an HTTP request. Take a screenshot of my request to visit Zhihu.

   Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8Accept-Encoding:gzip, deflate, sdchAccept-Language:zh-CN,zh;q=0.8,en;q=0.6Cache-Control:no-cacheConnection:keep-aliveCookie:[key=value...]; Host:www.zhihu.comPragma:no-cacheUser-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.104 Safari/537.36

   Copy after login

4. After the server receives the request, it will parse the request information, including access to various resources, whether there is cache, the request method, etc. After it is analyzed and processed with the database, it will return a response, which contains the resource files you want to access, including html, css, js, img, etc.

Browser analysis

After finishing the relatively low-level computer network stuff (the physical layer and data link layer were basically not discussed, okay?!), we The browsers at the application layer have begun to make great achievements.

First, the browser will parse HTML, CSS, and JS, render the DOM tree and styles, and implement interaction or animation effects through Js.

Then, you can get a beautiful or rich application Web.

Written at the end

Actually, the writing process has gone through relevant reviews, and what is written here is not perfect. Because the bottom layer does too many complicated things, I don’t know how to write it so as not to mislead others. You can only choose to write about representative and familiar things. But the feeling in my heart is indeed very profound. Computer network is a very complex project. Both the hierarchical structure and the various protocols in it have been carefully considered and settled by generations of people.

In our opinion, we just input a piece of English, but behind it is a series of close cooperation with a large and complex browser, browser kernel, operating system, computer network, etc. something. We can have such a pleasant and rich Internet life, which is inseparable from the efforts of every generation of engineers. Salute.