1. Static loading
CSS, image resource files can be downloaded in parallel during page rendering and will not block. Under IE8 and FF, parallel downloads of JS can also be supported. Although the JS download of the page has been accelerated, JS blocks the page rendering still exists. Only when JS is loaded can the rest of the page continue to render. Script placed in the head part is the worst because for the page, the head part is required and is necessary for the latter part. After the head part is not loaded, the Body part will not start parsing. Before the Body parsing, the page is blank. Which part of the page is blocked when placed on static Script, it is easy to understand from the browser implementation point of view, because it is entirely possible to modify page elements in JS code to affect the Dom structure. Because the browser is unpredictable about JS behavior, it has to wait until the previous Script is loaded before continuing to render. So the best practice is often to put Script near the bottom of the page.
The impact of JS loading on foreground 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 many independent modular JS in the business that need to be loaded, you can consider online packaging solutions.
2. Delay 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:///TR/1999/REC-html401-19991224/interact/
However, some browsers do not support this property. So it's not a good cross-browser solution.
3. Dynamic loading
<script type="text/javascript">
var js = ("script");
= '**.js';
("head")[0].appendChild(js);
</script>
This code creates a script tag and inserts this tag into the document. The key is that the loading of this script 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 script scripts. The performance of different browsers in this regard is very different. See this articleDynamically imported external JS files are loaded in different browsers in different browsers.
There are two very prominent points.
1. For the same dynamic loading code, different browsers will perform differently on the dynamic loading of js in different browsers.
2. The code that implements dynamic loading is different in sequence, and the results may be very different for the same browser.
like:
The code sequence changes, the performance of IE is different.
Therefore, for dynamically loaded scripts, one of the issues that needs to be focused on is the interface dependency problem of dynamically loaded JS scripts. The solution to this problem is not complicated, and it tracks the loading status of the loaded scripts according to the needs of implementing the business. The load status is determined in IE using the readyState attribute, which is not supported by IE browser, and the call to the onload method after the script is loaded.
The industry's excellent lazy loading library
LazeLoad by Ryan Grove/rgrove/lazyload
Kyle Simpson's LABjs/