When downloading JavaScript, all browsers will block all other activities, such as downloading other resources and rendering content. After downloading, parsing, and executing JavaScript code, you can continue to download other resources and present the content in parallel. Blocked download of external JS
When downloading JavaScript, all browsers will block all other activities, such as downloading other resources and rendering content. After downloading, parsing, and executing JavaScript code, you can continue to download other resources and present the content in parallel.
Someone may ask: Why can't JS be downloaded in parallel like CSS or image? Here we need to briefly introduce the principles of browser page construction,
When the browser receives the HTML document from the server and changes the HTML document to the DOM tree in the memory, if CSS or IMAGE is referenced on a node during the conversion process, then, a request is sent to request CSS or image, and the following conversion is continued without waiting for the request to return. After the request is returned, you only need to place the returned content in the corresponding position of the DOM tree. However, when JS is referenced, the browser will always wait for the return of this request to send one js request. Because the browser needs a stable DOM tree structure, and JavaScript code may directly change the DOM tree structure, such as using document. write or appendChild, or even directly use location. href redirects. In order to prevent JS modifications to the DOM tree, the browser needs to re-build the DOM tree, so it will block other downloads and rendering.
Blocked download diagram: it is the Time Waterfall Diagram for accessing the blogjava homepage. It can be seen that the first two images are downloaded in parallel, the next two JS files are all blocked downloads (one and one download ).
Blocked download embedded in JS
Embedded JS refers to JS Code directly written in HTML documents. As mentioned above, referencing external JS will block subsequent resource downloads and post-Content Rendering, and how embedded JS will be blocked, see the following two codes:
Code 1:
The Code is as follows:
<
- Blogjava>
- CSDN>
- Blog>
- ABC>
- AAA>
