Computer network-HTTP complete request process

HTTP complete request process

1. The browser looks up the IP address of the domain name

DNS lookup process:

1. Browser cache-The browser caches DNS records for a period of time, but the operating system does not tell the browser how long to store DNS records. Therefore, different browsers will store their own fixed time (ranging from 2 minutes to 30 minutes).
2. System cache-If the required record is not found in the browser cache, the browser will make a system call (gethostbyname in Windows), so that the record in the system cache can be obtained and queried.
3. Find the local hosts file
4. Router cache-Then, the previous query request is sent to the router. Routers generally have their own DNS cache.
5. ISP DNS cache-The next thing to check is the ISP's DNS cache server. ISP (Internet Service Provider) is an Internet service provider, and the corresponding cache records can generally be found here.
6. DNS recursive search-your ISP's DNS server starts with the domain name server to perform a recursive search, from the .com top-level domain name server to the example domain name server. Generally, the cache of the DNS server will have the domain name in the .com domain name server, so the matching process to the top server is not so necessary.

DNS process of domain name resolution:

• The client sends a DNS request to translate the IP address or host name;
• After receiving the request from the client, the DNS server checks the cache of the DNS server. If it finds the requested address or name, it sends a response message to the client;
• If it is not found, search it in the database. If it finds the requested address or name, it will send a response message to the client;
• If it is not found, the request is sent to the root domain DNS server, and the top-level domain is searched from the root domain in order, the top-level searches for the second-level domains, and the second-level domains are searched for the third-level, until the address or name to be resolved is found. Then, it sends a response message to the DNS server on the network where the client is located. After receiving the response, the DNS server first stores it in the cache, and then sends the resolution result to the client.
• If it is not found, an error message is returned.

2. The browser establishes a TCP connection with the WEB server (three-way handshake)

Reference address: https://baijiahao.baidu.com/s?id=1654225744653405133&wfr=spider&for=pc

• Detailed illustration

• Dynamic illustration
  
• Popular illustration
  

Third, the browser sends an HTTP request to the WEB server

Reference address: https://blog.csdn.net/ailunlee/article/details/90600174

An HTTP request message consists of 4 parts: request line, headers, blank line and request body

Fourth, the server responds to the HTTP request, and the browser gets the HTML code

Reference address: https://blog.csdn.net/ailunlee/article/details/90600174

The HTTP response message consists of four parts: status line, corresponding headers, blank line, and response body.

5. The browser parses the HTML code and requests resources in the HTML code

After the browser gets the html file, it starts to parse the html code. When it encounters static resources such as js/css/image, it requests download from the server (multi-threaded download will be used, and the number of threads per browser is not Same), this is the time to use the keep-alive feature. Once an HTTP connection is established, multiple resources can be requested. The order of downloading resources is in accordance with the order in the code, but because the size of each resource is different, and the browser has It is a multi-threaded request to request resources, so the order shown here is not necessarily the order in the code.

Sixth, the browser parses and renders the page

After the browser gets the response text HTML, the next step is to introduce the browser rendering mechanism

The browser parsing and rendering the page is divided into the following five steps:

• Parse the DOM tree according to HTML

• Generate CSS rule tree based on CSS parsing

• Combine DOM tree and CSS rule tree to generate render tree

• Calculate the information of each node according to the rendering tree

• Draw the page based on the calculated information

• Parsing the DOM tree
  according to HTML According to the content of HTML, the tags are parsed into a DOM tree according to the structure. The DOM tree parsing process is a depth-first traversal. That is, first construct all child nodes of the current node, and then construct the next sibling node.
  In the process of reading HTML documents and constructing the DOM tree, if a script tag is encountered, the construction of the DOM tree will be suspended until the script is executed.

• Generate CSS rule tree based on CSS parsing. When
  parsing CSS rule tree, js execution will be suspended until CSS rule tree is ready.
  The browser will not render until the CSS rule tree is generated.

• Combining the DOM tree and the CSS rule tree to generate the rendering tree After the
  DOM tree and CSS rule tree are all ready, the browser will start to build the rendering tree.
  Streamlining the CSS can speed up the construction of the CSS rule tree, thereby speeding up the page response.

• Calculate the information (layout)
  layout of each node according to the rendering tree : calculate the position and size of each rendering object through the information of the rendering object in the rendering tree.
  Reflow: After the layout is completed, it is found that a certain part has changed and affected Layout, then you need to go back and re-render.

• Drawing the page according to the calculated information During the drawing
  stage, the system traverses the rendering tree and calls the renderer's "paint" method to display the content of the renderer on the screen.
  Redrawing: The background color and text color of an element will not affect the attributes of the surrounding or internal layout of the element, and will only cause the browser to redraw.
  Reflow: If the size of an element changes, the rendering tree needs to be recalculated and re-rendered.

Seven, close the TCP connection (waves four times)

Reference address: https://baijiahao.baidu.com/s?id=1654225744653405133&wfr=spider&for=pc

• Detailed illustration
  
• Popular illustration
  

Eight, the browser makes an asynchronous request

In the web 2.0 era, the client continues to communicate with the server even after the page is rendered. This mode is called AJAX, which is the abbreviation of "Asynchronous JavaScript And XML".

JS parsing is done by the JS parsing engine in the browser. JS is single-threaded operation, that is, only one thing can be done at the same time, all tasks need to be queued, the previous task ends, and the next task can start. But there are some tasks that are time-consuming, such as IO reading and writing, so a mechanism is needed to execute the tasks that are ranked later, which are: synchronous tasks (synchronous) and asynchronous tasks (asynchronous). The execution mechanism of JS can be seen as a main thread plus a task queue. Synchronous tasks are tasks that are executed on the main thread, and asynchronous tasks are tasks that are placed in the task queue. All synchronous tasks are executed on the main thread to form an execution stack; an asynchronous task will place an event in the task queue when it has a running result; when the script runs, the execution stack will be run in turn, and then the event will be extracted from the task queue and run The task in the task queue, this process is constantly repeated, so it is also called the event loop (Event loop).

During the parsing process of the browser, if it encounters a request for external resources, the request process is asynchronous and will not affect the loading of the HTML document, but when the JS file is encountered during the document loading process, the HTML document will hang the rendering process. The rendering process of HTML will not continue until the JS file in the document is loaded and the parsing is completed. The reason is because JS may modify the DOM structure, which means that the download of all subsequent resources is unnecessary before the JS execution is completed. This is the fundamental reason why JS blocks subsequent resource downloads. The loading of 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 the JS code is executed.

Thinking problem

Q: What is the maximum number of concurrent connections for http requests?
A: This depends on the IO mode of the server. If it is blocking IO, the maximum number of connections = the maximum number of concurrent threads. If non-blocking IO, that is, the selector is used, then the maximum number of connections has nothing to do with the number of concurrent threads. There can be 2W connections, but the number of threads can be 400, but the response will be slower (or return), in other cases He refused directly.

The content is organized by referring to online articles, only for personal learning use:

1. https://blog.csdn.net/weixin_30693683/article/details/100092946
2. https://baijiahao.baidu.com/s?id=1654225744653405133&wfr=spider&for=pc
3. https://blog.csdn.net/ailunlee/article/details/90600174
4. https://www.cnblogs.com/xuzekun/p/7527736.html