Shulou(Shulou.com)06/02 Report--

It is believed that many inexperienced people don't know what to do about how to load JavaScript in high-performance WEB development. therefore, this paper summarizes the causes and solutions of the problem. I hope you can solve this problem through this article.

Blocking downloads of external JS

When downloading JS, all browsers block all other activities, such as downloading other resources, rendering content, and so on. It is not until the JS has finished downloading, parsing, and executing that it continues to download other resources and render content in parallel.

Some people may ask: why can't JS be downloaded in parallel like CSS and image? Here we need to briefly introduce the principle of how browsers construct pages.

When the browser receives the HTML document from the server and converts the HTML into a DOM tree in memory, if you find that a node (node) refers to CSS or IMAGE in the conversion process, it will send another request to request CSS or image, and then continue to perform the following conversion without waiting for the return of request. When request returns, you just need to put the returned contents into the corresponding location in the DOM tree on OK. But when a JS is referenced, the browser sends a js request and waits for the request to return. Because the browser needs a stable DOM tree structure, and there is likely to be code in JS that directly changes the DOM tree structure, such as using [xss_clean] or appendChild, or even directly using location.href to jump, the browser needs to rebuild the DOM tree in order to prevent JS from modifying the DOM tree, so it will block other downloads and rendering.

Blocking download figure: the following figure shows the time waterfall of visiting the home page of blogjava. You can see that the first two image are downloaded in parallel, while the next two JS are blocked downloads (1 download).

Blocking downloads embedded in JS

Embedded JS refers to JS code written directly in an HTML document. As mentioned above, referencing an external JS will block subsequent resource downloads and subsequent content rendering, and how the embedded JS will block, see the following column 2 codes:

Code 1:

Ul > li > blogjavaspan style= "color: # 800000;" > li > li > CSDNspan style= "color: # 800000;" > li > li > blog Park span style= "color: # 800000;" > li > li > ABCspan style= "color: # 800000;" > li > li > AAAspan style= "color: # 800000;" li > ul > span style= "color: # 800000 "> div > script type=" text/javascript "> / / cycle for 5 seconds var n = Number (new Date ()); var N2 = Number (new Date ()); while ((N2-n) (6x1000)) {N2 = Number (new Date ());} span style=" color: # 800000; "> script > div > ul > li > MSNspan style=" color: # 800000 "> li > li > GOOGLEspan style=" color: # 800000; "> li > li > YAHOOspan style=" color: # 800000; "> li > ul > span style=" color: # 800000; "> div >

Code 2 (the code in test.zip is exactly the same as the JS code in Code 1):

Div > ul > li > blogjavaspan style= "color: # 800000;" > li > li > CSDNspan style= "color: # 800000;" > li > li > span style= "color: # 800000;" > li > li > ABCspan style= "color: # 800000;" > li > li > AAAspan style= "color: # 800000;" > li > ul > span style= "color: # 800000 "> div > script type=" text/javascript "src=" http://www.blogjava.net/Files/BearRui/test.zip">span style= "color: # 800000;" > script > div > ul > li > MSNspan style= "color: # 800000;" > li > li > GOOGLEspan style= "color: # 800000; > li > li > YAHOOspan style=" color: # 800000; "> li > ul > span style=" color: # 800000; "> div >

After running, you will find that in Code 1, there is a blank on the page in the first 5 seconds, and all the pages are displayed after 5 seconds. In Code 2, blogjava,csdn and so on are displayed first in the first 5 seconds, and then MSN is displayed after 5 seconds.

You can see that embedded JS will block the presentation of all content, while external JS will only block the display of subsequent content, both ways will block the download of subsequent resources.

The problem of CSS blocking loading caused by embedded JS

How can CSS block loading? CSS could have been downloaded in parallel, under what circumstances blocking loading would occur (in the test observation, CSS under IE6 is blocked loading, the following tests are performed under non-IE6):

Code 1 (CSS of a foreign server is selected here for effect):

Html xmlns= "http://www.w3.org/1999/xhtml"> head > title > js testspan style=" color: # 800000; "> 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" / > span style= "color: # 800000 "> head > body > img src=" http://www.blogjava.net/images/logo.gif" / > img src= "http://csdnimg.cn/www/images/csdnindex_piclogo.gif" / > span style=" color: # 800000; "> body > span style=" color: # 800000; "> html >

Time Falls:

Code 2 (only an empty embedded JS is added):

Head > title > js testspan style= "color: # 800000; > 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 a () {} span style= "color: # 800000;" > script > span style= "color: # 800000 "> head > body > img src=" http://www.blogjava.net/images/logo.gif" / > img src= "http://csdnimg.cn/www/images/csdnindex_piclogo.gif" / > span style=" color: # 800000; "> body >

Time Falls:

As can be seen from the time waterfall diagram, in Code 2, CSS and pictures are not downloaded in parallel, but wait for CSS to download the following two pictures in parallel. When CSS is followed by embedded JS, the CSS will block the download of the following resources.

One might ask, why not say that the embedded JS blocks the rest of the resources, but that the CSS is blocked? Think that we are using an empty function, parsing this empty function 1ms is enough, and the next two images are not downloaded until 1.3s after CSS has finished downloading. You can also try to put the embedded JS in front of the CSS so that there will be no blocking.

Root cause: because browsers maintain the order of css and js in html, stylesheets must be loaded and parsed before embedded JS execution. The embedded JS blocks subsequent resource loads, so the above CSS blocks downloads.

Where should embedded JS be placed?

1. Putting it at the bottom will still block all rendering, but it will not block the download of resources.

2. If the embedded JS is placed in the head, please put the embedded JS in the CSS header.

3. Use defer

4. Do not call long-running functions in the embedded JS. If you must, you can call them with setTimeout.

PS: many websites like to embed JS in head and are used to putting it after CSS, such as www.qq.com seen. Of course, there are also many websites that put JS in front of CSS, such as yahoo,google.

After reading the above, have you mastered how to load JavaScript in high-performance WEB development? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.