Detailed description of LABJS dynamic loading of js files on demand, detailed description of labjs dynamic js

Detailed description of LABJS dynamic loading of js files on demand, detailed description of labjs dynamic js

LABjs is a small JavaScript tool used to load JavaScript files as needed. Using this tool can improve page performance and avoid loading unnecessary JavaScript files, you can dynamically and concurrently load script files and manage the execution sequence of loaded script files.

Simple Example

$LAB.script("script1.js", "script2.js", "script3.js").block(function(){  // wait for all to load, then do something  script1Func();  script2Func();  script3Func();});

This section describes several examples of LABJS:
Instance 1:

$ LAB. script ("script1.js "). script ("script2.js "). script ("script3.js "). wait (function () {// wait until all scripts are loaded and then execute the code block script1Func (); script2Func (); script3Func ();});

Instance 2:

$ LAB. script ({src: "script1.js", type: "text/javascript "}). script ("script2.js "). script ("script3.js "). wait (function () {// wait until all scripts are loaded and then execute the code block script1Func (); script2Func (); script3Func ();});

Instance 3:

$ LAB. script ("script1.js", "script2.js", "script3.js "). wait (function () {// wait until all scripts are loaded and then execute the code block script1Func (); script2Func (); script3Func ();});

Instance 4:

$ LAB. script (["script1.js", "script2.js"], "script3.js "). wait (function () {// wait until all scripts are loaded and then execute the code block script1Func (); script2Func (); script3Func ();});

Instance 5:

$ LAB. script ("script1.js "). wait () // empty wait () only ensures that script1 is executed before other code. script ("script2.js") // script2 and script3 depend on script1. script ("script3.js "). wait () // But script2 and script3 are not mutually dependent and can be downloaded in parallel. script ("script4.js") // script4 depends on script1, script2, and script3. wait (function () {script4Func ();});

Instance 6:

$ LAB. script ("script1.js") // There is no dependency between script1, script2, and script3 ,. script ("script2.js") // You can execute the script in any order. script ("script3.js "). wait (function () {// if needed, you can execute the javascript function alert ("Scripts 1-3 are loaded! ") ;}). Script (" script4.js ") // depends on script1, script2, and script3. wait (function () {script4Func ();});

Instance 7:

$ LAB. setOptions ({AlwaysPreserveOrder: true}) // you can specify the waiting time for each script. script ("script1.js") // script1, script2, script3, and script4 depend on each other. script ("script2.js") // execute the script in sequence after parallel download. script ("script3.js "). script ("script4.js "). wait (function () {script4Func ();});

Instance 8:

$ LAB. the script (function () {// '_ is_IE' value ie is true, and the non-ie value is false if (_ is_IE) {return "ie. js "; // if it is ie, this js will be loaded} else {return null; // if it is not ie, this code will be skipped }}). script ("script1.js "). wait ();

LABjs Loading Method

Dynamic Loading of script files in LABjs refers to loading external js files in multiple ways during page js script execution (mainly different from html pages, use the <script> tag Static Loading script)

There are many ways to dynamically load scripts, with different advantages and disadvantages. I will not repeat them here. For more information, see the reference link at the end of this article :).

LABjs mainly uses three techniques: Script Element, XHR Injection, and Cache Trick.

First, we will give a brief introduction to the three loading methods. The fourth part will analyze the use cases of the three methods in the LABjs source code implementation.

Script Element (LABjs uses the Loading Method by default)

The most common Dynamic Loading Method of scripts has many advantages, including: 1. Simple implementation 2. Cross-Domain availability 3. It does not block loading of other resources.

In Opera/Firefox (earlier versions), the script execution sequence is consistent with the order in which the node is inserted to the page.

In IE/Safari/Chrome: The execution sequence cannot be guaranteed.

Note:

In the new version of Firefox, the script execution sequence is not necessarily the same as the page insertion sequence. However, you can set the async attribute of the script tag to false to ensure sequential execution.

In earlier versions of Chrome, the script execution sequence is not necessarily the same as the page insertion sequence. However, you can set the async attribute of the script tag to false to ensure sequential execution.

XHR Injection
Load the script file using ajax requests, and then execute it in the following way:
Eval: Common Methods
XHR injection: Creates a script element and injects the content of the script file to be loaded.
Main restrictions: Cross-origin failure
Cache Trick (strongly dependent on browser features, not recommended)
When you set the type attribute of the script element to a value not recognized by the browser, such as "text/cache", "text/casper", and "text/hellworld, the behavior of different browsers is as follows:
In IE/Safari/Chrome (old version): the script is loaded as usual but not executed. If the browser does not disable the cache, the loaded script will be cached by the browser, when necessary, you only need to re-create a script tag, set the type to the correct value, src points to the previously requested File url (equivalent to reading files from the cache)
Opera/Firefox: Not loaded
Note:
It is strongly dependent on the implementation of browser features and may become invalid as the implementation of browser features changes. It is not recommended
In the new version of chrome browser, the type of the script element is set to non-"text/javascript" and the script file is no longer loaded.

How to judge the Script Loading Scheme in LABjs

Ignore the technical details and describe the implementation in LABjs through a piece of pseudo code, which is roughly as follows:
First, determine whether to pre-load the requested script (whether to pre-load the judgment condition to see the pseudocode comments );
Such as pre-loading, and then determine whether the browser supports real pre-loading; if real pre-loading is supported, it is preloaded; if not, determine whether the requested script is in the same domain as the current page. Use XHR Injection. If not, use Cache Trick;
If no pre-loading is performed, the browser determines that the async attribute of the script element is not supported (see pseudocode comments). If so, set the async attribute and request the script file. If no, directly load the script file through the script element;
 

If (ifPreloadScript) {// when the requested script file is pre-loaded: 1. requires pre-loading. 2. The browser supports pre-loading if (supportRealPreloading) {// if true preload if (supportPreloadPropNatively) is supported {// you can set the preload attribute of the script tag to implement script pre-loading, and separate loading and execution // Nicolas C. the good wishes of Zakas are not supported by browsers:/blog/2011/02/14/separating-javascript-download-and-execution/script. onpreload = callback; script. newPreload = true; script. src = targetUrl;} else {script. onreadystatechange = callback; // It actually refers to IE browser. If the src attribute of the script element is specified, scripts will be loaded immediately in IE browser. src = targetUrl; // even if the script element is not inserted into the page, callback is the pre-loaded callback} else if (inSameDomain) {// non-Cross-origin, XHR Injection: the requested script and the current page are in the same domain xhr = new XMLHttpRequest (); // since the previous judgment has ruthlessly abandoned IE outside of this condition branch, so use new XMLHttpRequest (). xhr. onreadystatechange = callback; xhr. open ("GET", targetUrl); xhr. send ();} else {// the most helpless move, Cache Trick, the new version of chromei does not support script. onload = callback; script. type = 'text/cache'; script. src = targetUrl ;}} else {if (canContrlExecutionOrderByAsync) {// if the script can be forced to execute the script in sequence through the async attribute of the script element, it has been accepted by the html5 team and put in the draft:/Dynamic_Script_Execution_Order # My_Solution script. onload = callback; script. async = false; // set async of the script element to false to ensure that the execution sequence of the script is consistent with the request sequence. src = targetUrl;} else {script. onload = callback; script. src = targetUrl ;}}

In fact, when you create an img node on the page and direct its src to a script file, Some browsers can also play the role of file pre-loading, so did the LABjs author not think of this?