HTML page loading and parsing process
1. The user enters the URL (assuming it is an html page, and is the first visit), the browser sends a request to the server, and the server returns the html file.
2. The browser starts to load the html code and finds that there is a <link> tag in the <head> tag that references the external CSS file.
3. The browser issues another request for the CSS file, and the server returns the CSS file.
4. The browser continues to load the code in the <body> part of the html, and the CSS file is available, and you can start rendering the page.
5. The browser finds an <img> tag referring to an image in the code and sends a request to the server. At this time, the browser will not wait until the image is downloaded, but continue to render the code behind.
6. The server returns the image file. Because the image occupies a certain area and affects the arrangement of the following paragraphs, the browser needs to go back and re-render this part of the code.
7. The browser found a <script> tag containing a line of Javascript code, and quickly ran it.
8. The Javascript script executes this statement, which instructs the browser to hide a <style> (style.display = ”none”) in the code. Cup, suddenly such an element is missing, and the browser has to re-render this part of the code.
9. Finally waited for the arrival of </ html>, the browser burst into tears ...
10. Wait, it ’s not over yet, the user clicked the “skin” button in the interface, Javascript made the browser change a bit <link> The CSS path of the label.
11. The browser summoned everyone here <div> <span> <ul> <li> We, "Everyone pack and pack, we have to come again ...", the browser requested a new CSS file from the server and re-rendered the page.
Therefore, in general, css is placed in the head tag, and js reference is placed last
The link does not block the generation of the dom tree, but it will block the paint (it may also be the render tree). Personally, it should be that the link blocks the css tree, resulting in paint delay
The script tag will definitely block dom parsing. If the browser encounters it, it will download it and execute the content inside, before continuing to parse the following dom. There are two solutions. One is to add async to the script tag. One is to use createElement to dynamically create script