JavaScript file loading: Labjs and Requirejs

Traditionally, loading JavaScript files is all about using <script> tags.

Just like this:

<script type= "Text/javascript" src= "Example.js" ></script>

<script> tags are convenient, as long as the page is added, the browser will read and run. However, it has some serious flaws.

　　(1) Strict reading order. since the browser reads JavaScript files in the order in which they appear in the Web page, and then runs immediately, causing the least dependent files to be placed on top of each other when multiple files are dependent on each other, the most dependent files must be placed on the last side. Otherwise the code will error.

　　(2) Performance issues. The browser uses the "sync mode" load <script> tag, which means that the page will "jam" (blocking), wait for the JavaScript file to load, and then run the HTML code later. When there are multiple <script> tags, the browser cannot read at the same time, must read one more to read another, resulting in significantly longer read time, slow page response.

To solve these problems, you can load JavaScript files dynamically using the Dom method.

function Loadscript (URL) {

var script = document.createelement ("script");

Script.type = "Text/javascript";

script.src = URL;

Document.body.appendChild (script);

}

The idea is that the browser instantly creates a <script> tag and then reads the JavaScript file "asynchronously". This does not cause the page to clog, but it can cause another problem: the JavaScript files that are loaded are not in the original DOM structure, Therefore, the callback function specified in the Dom-ready (domcontentloaded) event and the Window.onload event is not valid for it.

External libraries Labjs and Requirejs can help us manage JavaScript loading more effectively.

Here's a simple example, based on ScriptJunkie's article, to illustrate the basic usage of these two library functions. For more advanced usage, see their documentation.

<script src= "Script1.js" ></script>

<script src= "Script2-a.js" ></script>

<script src= "Script2-b.js" ></script>

<script type= "Text/javascript" >

INITSCRIPT1 ();

InitScript2 ();

</script>

<script src= "Script3.js" ></script>

<script type= "Text/javascript" >

INITSCRIPT3 ();

</script>

The above code will load 4 JavaScript files sequentially: Script1.js, Script2-a.js, Script2-b.js, and Script3.js. After loading the first three files, run two functions initScript1 () and InitScript2 (), and then run the function initScript3 () after loading the fourth file.

Below, rewrite it with LABJS:

<script src= "Lab.js" ></script>

<script type= "Text/javascript" >

$LAB

. Script ("Script1.js"). Wait ()

. Script ("Script2-a.js")

. Script ("Script2-b.js")

. Wait (function () {

INITSCRIPT1 ();

InitScript2 ();

})

. Script ("Script3.js")

. Wait (function () {

INITSCRIPT3 ();

});

</script>

First, the $LAB object replaces the <script> tag, and then the. Script () method indicates that the. Wait () method that loads the JavaScript file, without parameters, immediately runs the JavaScript file that you just loaded, with the parameter. Wait () The method also immediately runs the JavaScript file that you just loaded, but also runs the function specified in the parameter.

It is important to note that multiple $lab chains can be run at the same time, but they are completely independent and there is no order relationship. If you want to make sure that a JavaScript file runs after another file, you can only write them in the same chain operation. It is only when certain scripts are completely irrelevant that you should consider dividing them into different $lab chains, indicating that there is no correlation between them.

Next is the Requirejs rewrite:

<script src= "Require.js" ></script>

<script type= "Text/javascript" >

Require ([

"Script1.js",
"Script2-a.js",
"Script2-b.js",
"Script3.js"

],

function () {

INITSCRIPT1 ();
InitScript2 ();
INITSCRIPT3 ();

}

);

</script>

Require () accepts two parameters, the first array represents the JavaScript file to be loaded, and the second is the callback function to run after the load is complete. The native require () does not support sequential loading, so which of the four JavaScript files is loaded first, without knowing beforehand, require () will only run the specified callback function after all the four files have been loaded.

If loading in order is important to you, you can use the official order plugin.

JavaScript file loading: Labjs and Requirejs