After a page is loaded and displayed from the input URL to the page, what happened to this process ?, Url page

After a page is loaded and displayed from the input URL to the page, what happened to this process ?, Url page

For different operations on URLs in the URL bar, there are different ways to load resources and obtain data. The detailed procedures below are as follows:"Enter the URL in the address bar and press enter to load the resource"This operation method is used for parsing. The process of other methods is similar, and the difference will be analyzed later.

1. the browser opens a thread to process this request. If the URL is determined to be http, it will be processed in web mode;

2. the browser first checks the browser cache-system cache-vro cache. If there is a cache, the page content is displayed directly on the screen (no request is sent to the server at this time ). If not, perform the next step (a request must be sent 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 successfulHTTPProtocol session, browser sends Header(Request Header);

6.GoWebOn the serverWeb Server, SuchApache,Tomcat,Node. JSOther servers;

7.Enter the deployed backend application, suchPHP,Java,JavaScript,PythonAnd find the corresponding request processing;

8. Process the end feedback header and return the data to the browser.;

9. Start download in the browserHtmlDocument(Response Header, status code200)And set 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 file to form a CSS tree (CSSOM ).

Next, we need to combine DOM + CSSOM to form a Render Tree );

11. After the tree is drawn, You need to calculate the position of each node on the page. This process is called layout;

12. The layout process is performed on a continuous two-dimensional plane. Next, we need to raster these results and map them to the discrete two-dimensional plane of the screen.

To improve performance, modern browsers divide pages into multiple layers, respectively paint and combine them into a page (composite layers ).

　

PS:The process for loading resources and obtaining data for URLs in the URL bar is similar to that described above, but there are some differences in processing cache:

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

2. F5 Refresh: If Step 5 is not displayed, the return value is determined in step 3. If step 2nd is returnedCache is available, and you can directly useCache; ifIf 200 is returnedNo cache, executed sequentially until the end

3. The difference between Ctrl + F5 refreshing the webpage:No step 2, andIn step 1, the system must return step 8th and run it in sequence until the end.

(For the above three different methods, it is easier to distinguish from the http protocol's cache mechanism. Here we will focus more on the difference between sending requests to the server and returning values)

 

 

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