Home > Developer > JavaScript
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:
Copy codeThe Code is as follows:
<Ul>
<Li> blogjava> </li>
<Li> CSDN> </li>
<Li> blog Park> </li>
<Li> ABC> </li>
<Li> AAA> </li>
<Ul>
<Div>
<Script type = "text/javascript">
// Loop for 5 seconds
Var n = Number (new Date ());
Var n2 = Number (new Date ());
While (n2-n) (6*1000 )){
N2 = Number (new Date ());
}
</Script>
<Div>
<Ul>
<Li> MSN> </li>
<Li> GOOGLE> </li>
<Li> YAHOO> </li>
</Ul>
</Div>
Code 2(the code in test.zip is exactly the same as the JS Code in code 1 ):
Copy codeThe Code is as follows:
<Div>
<Ul>
<Li> blogjava> </li>
<Li> CSDN> </li>
<Li> blog Park> </li>
<Li> ABC> </li>
<Li> AAA> </li>
<Ul>
<Div>
<Script type = "text/javascript" src = "test.zip"> <script>
<Div>
<Ul>
<Li> MSN> </li>
<Li> GOOGLE> </li>
<Li> YAHOO> </li>
</Ul>
</Div>
After running, you will find that in code 1, the page is blank in the first five seconds, and the page is displayed in five seconds. In code 2, blogjava and csdn are displayed in the first five seconds, and MSN is displayed in the first five seconds.
It can be seen that embedding JavaScript will block the presentation of all content, while external JS will only block the display of post-content. Both methods will block the download of post-content resources.
CSS blocking Loading Caused by JS embedding
How does CSS block loading? CSS can be downloaded in parallel. Under what circumstances will blocking loading occur (in test observation, CSS is blocked loading in IE6, and the following test is performed in non-IE6 ):
Code 1 (for the purpose of the effect, select the CSS of a foreign server ):
Copy codeThe Code is as follows:
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> js test> title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Link type = "text/css" rel = "stylesheet" href = "http: // 69.64.92.205/Css/Home3.css"/>
</Head>
<Body>
</span> br/>
</Body>
</Html>
Time falls:
Code 2 (only one empty embedded JS is added ):
<Head>
<Title> js test> title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Link type = "text/css" rel = "stylesheet" href = "http: // 69.64.92.205/Css/Home3.css"/>
<Script type = "text/javascript">
Function (){}
</Script>
<Head>
<Body>
</span> br/>
</Body>
Time falls:
From the time falls diagram, we can see that in Code 2, CSS and images are not downloaded in parallel, but the two images after the CSS download is completed are downloaded in parallel, when CSS is followed by embedded JS, the CSS will block subsequent resource downloads.
Some may ask, why not to mention that the embedded JS blocks the subsequent resources, but CSS blocks? Think about how we use an empty function. parsing this empty function for 1 ms is enough, and the next two images will be downloaded after CSS is downloaded for 1.3s. You can also try to put the embedded JS in front of CSS without blocking.
Root Cause: Because the browser maintains the css and js order in html, the style sheet must be loaded and parsed before embedded Javascript execution. The embedded JS will block the subsequent resource loading, so the above CSS will block the download.
Where should embedded JS be placed?
1. Put it at the bottom. Even if it is put at the bottom, all rendering will be blocked, but resource download will not be blocked.
2. If the embedded JS is placed in the head, put the embedded JS in the CSS header.
3. Use defer
4. Do not call long-running functions in Embedded JS. You can use setTimeout to call functions.
PS: many websites like to embed JS in the head and are used to putting it behind CSS, such as www.qq.com. Of course there are also many websites that place JS in front of CSS, such as yahoo and google.
For [Declaration] reprinted, please indicate the source: http://www.blogjava.net/bearrui /. Commercial use prohibited!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
