Summary of Script loading methods_javascript skills

1. Static loading
CSS and image resource files can be downloaded in parallel during page rendering without blocking. Under IE8 and FF, parallel downloading of JS can also be supported. Although the JS download of the page is accelerated, the blocking of page rendering by JS still exists. Only when the JS is loaded, the remaining part of the page can continue to be rendered. The Script placed in the Head part is the worst, because for the page, the Head part is required and necessary for the later part. If the Head part is not loaded, the Body part will not start to be parsed. Before the Body is parsed, the page will be blank. of. No matter which part of the page the static script is placed on, it will block. From the perspective of browser implementation, it is easy to understand, because it is entirely possible to modify the page elements in the JS code and affect the Dom structure. Because the browser's behavior of JS is unpredictable, it has to wait until the previous Script is loaded before continuing to render. So the best practice is to place the Script near the bottom of the page .
The impact of JS loading on front-end performance. One of Yahoo's optimization principles is to reduce the number of HTTP requests, compress JS, merge JS, and reduce the number of JS.
If there are a lot of independent modular JS that need to be loaded in the business, you can consider the online packaging solution.

2. Lazy loading
W3C standard HTML4.01 defines a defer attribute for the Script tag, indicating that the JS will not change the content of the Dom, and the browser can continue to parse and render without blocking the Script.
http://www.w3.org/TR/1999/REC-html401-19991224/interact/scripts.html

But some browsers do not support this attribute. So it's not a good cross-browser solution.

3. Dynamic loading

Copy code The code is as follows:

This code creates a script tag and inserts it into the document. The key is that this script is loaded asynchronously, will not affect the page rendering process, and will not block the display of page content. Although this method will not block the loading of page resources, it may block other scripts. The performance of different browsers is very different in this regard. Please refer to this article Dynamically introduced external The loading order of JS files in various browsers is inconsistent
There are two very prominent points,

1. For the same dynamic loading code, different browsers have different performance on whether the dynamically loaded js blocks the next Script tag

2. The order of the code that implements dynamic loading is different. For the same browser, the results may be very different,
such as:

If the code order is exchanged, the performance of IE will be different

So, when it comes to dynamically loading scripts, one issue that needs to be focused on is the interface dependency of the dynamically loaded JS script. The solution to this problem is not complicated, it is to track the loading status of the loaded script according to the needs of realizing the business. The readyState attribute is used to determine the loading status under IE. Non-IE browsers support it and the onload method is called after the script is loaded.

The industry’s best lazy loading library

LazeLoad by Ryan Grove https://github.com/rgrove/lazyload
LABjs by Kyle Simpson http://labjs.com/