Home > Article > Web Front-end > Principles and optimization of html page rendering_html/css_WEB-ITnose
Principles and optimization of html page rendering_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:52:00860browse
The approximate process of loading an html web page
1. The user enters the URL (assuming it is the first visit), the browser sends a request to the server, and the server returns the html file.
2. The browser starts loading the html code and finds that there is a link tag in the head tag that refers to the external css file.
3. The browser sends a request for the css file again, and the server returns the css file.
4. The browser continues to load the code in
, and the css code has been obtained, and the interface starts to be rendered.5. The browser finds an tag in the code that references an image and sends a request to the server. The browser does not wait until the image is downloaded, but continues to render the following code.
6. The server returns the image file. Since the image occupies a certain area and affects the subsequent layout, the browser needs to go back and re-render this part of the code.
7. The browser found a line of <script> code in js code and quickly executed it. </script>
The 8.js script executes this statement, which instructs the browser to hide a certain
9. Finally waiting for the return of , the browser burst into tears.
10. Wait, it’s not over yet. The user clicks the skin change button in the interface, and js causes the browser to change the css tag of .
11. The browser summons everyone present
- , "Everyone pack your bags, we have to start over...", the browser requests the server Create a new CSS file and re-render the page.
The blocking characteristics of js:
where js is blocking loading. When the browser loads js, it will not do other things while the browser is executing the js code. , that is, every occurrence of