What happens in the process from entering the URL to the completion of page loading and display of a page?

There are different ways to load resources and obtain data for different operations of the URL in the address bar. The following detailed process is for "Enter the URL in the address bar and press the enter key to load the resource" The operation method is analyzed, and the process of other methods is similar. The differences will be analyzed later.

　1. The browser opens a thread to process this request. If the URL is judged to be http protocol, it will be processed according to the web method;

　2. The browser first checks the browser cache-system cache-router cache. If there is one in the cache, the page content will be displayed directly on the screen (no request is made to the server at this time). If not, proceed to the next step (you need to send a request to the server later); 　 3. Obtain the IP address of the website through DNS resolution;

　4. Initiate a

tcp connection to the real IP address server and establish a tcp three-way handshake with the browser.

　　5. After the handshake is successful, the

HTTP protocol session is carried out, and the browser sends the header (Request header);

　6. Enter the Web Server on the web server, such as Apache

, Tomcat, Node.JS and other servers; 　7. Enter the deployed backend application, such as PHP, Java, JavaScript

,

Python , etc., and find the corresponding request processing; 　8. Process the end feedback header and return the data to the browser;

　9. The browser starts downloading the htmldocument(response header, status code200)

, and sets the cache

; 　10. The browser then parses the entire HTML structure to form a DOM tree; at the same time, it also needs to parse the corresponding CSS files to form a CSS tree (CSSOM).

​ Next, you need to combine DOM + CSSOM to form a rendering tree (Render Tree); 　11. After drawing the tree, you need to calculate the position of each node on the page. This process is called layout

;

　12. The layout

process is carried out on a continuous two-dimensional plane. Next, these results need to be rasterized and mapped to the discrete two-dimensional plane of the screen. This process

　 The process is called paint; In order to improve performance, modern browsers divide the page into multiple layers, paint each

and then combine them into one page (composite layers

).

　

PS: As mentioned at the beginning of "There are different ways to load resources and obtain data for different operations of the URL in the address bar"The process of other methods is similar to the above method , but there are some differences in handling the cache:

1. "Go to" or press enter in the address bar to refresh: see above

2. F5 refresh: There is no step 2, and the return value is judged in step 8. If 304 is returned, it means that has cache, and cache is used directly at this time; if returns 200, it means No caching, sequential execution to the end

3. The difference between Ctrl+F5 to refresh the webpage: There is no step 2, and must return 200 in step 8 and execute sequentially to the end

(For the above three different methods, it is better to make a distinction from the caching mechanism of the http protocol to make it easier to understand. Here we focus more on 'sending a request to the server and its return value' to make a distinction. )

PS: Steps 10-12 focus more on the front-end rendering page process. For details, please refer to: http://www.jianshu.com/p/016e8e78eb1f