Specific methods of non-blocking loading in Javascript_javascript tips

Read the reading notes of "High Performance JavaScript"

A few principles:

1. Place the script at the bottom

is still in the head to ensure that the page can be loaded normally before js is loaded.

<script> is placed before </body>. </p> <p><strong>2. Group script</strong></p> <p> Since each <script> tag blocks the page parsing process when downloaded, limiting the total number of <script>s on a page can also improve performance. Applies to both inline and external scripts. </p> <p><strong>3. Non-blocking script</strong></p> <p>Wait until the page finishes loading, then load the js code. That is, the code download starts after the window.load event is emitted. </p> <p> (1) defer attribute: supports IE4 and fierfox3.5 and higher browsers </p> <p><script defer>...</script>

Inline and external files

<script> with defer attribute can appear anywhere in the document. The corresponding js file will start downloading when <script> is parsed, but the code will not be executed until the DOM is loaded (in the onload event handler before being called). Therefore, parallel downloading is implemented and also shows off other resources. </p> <p> (2) Dynamic script elements </p> <p>The Document Object Model (DOM) allows you to dynamically create almost all document content of HTML using js. <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="81426" class="copybut" id="copybut81426" onclick="doCopy('code81426')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code81426"> <br>var script=document.createElement("script"); <p>script.type="text/javascript";</p> <p>script.src="file.js";</p> <p>document.getElementByTagName_r("head")[0].appendChild(script);<br></p> </div> <br>The key point of this technology is: no matter where the download is initiated, the file will not download and run Block other page processing. Even in the head (except the http link for downloading the file). <p>（3）The YUI3 approach</p> <p> Concept: Use a small initial code, download the rest of the functional code, introduce the file first: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="73140" class="copybut" id="copybut73140" onclick="doCopy('code73140')"><u>Copy code</u></a></span> Code As follows:</div> <div class="codebody" id="code73140"> <br><script type="text/javascript src=http://files.jb51.net/file_images/article/201306/yuanma/combo.js></script>

This torrent file is about 10KB,

Use:

Copy code The code is as follows:

YUI().use(" dom",function(Y){

Y.Dom.addclass(...)

})

When all the code is available, the callback function is called, the YUI instance is passed in as a parameter, and the newly downloaded functionality can be used immediately.

The LazyLoad library

Usage: First introduce: lazyload-min.js

(4)

Copy code The code is as follows:

LazyLoad.js("a .js",function(){

Application.init();

})

Multiple files:

Copy the code The code is as follows:

LazyLoad.js(["a.js","b.js"],function(){

Application.init();

})

(5)The LABjs library

First introduce: lab.js

Copy code The code is as follows:

$LAB. script("a.js").wait(function(){

Application.init();

})

For multiple files, write them in a chain

His unique feature is the ability to manage dependencies.

You can specify which files should wait for other files through the wait() function.

For example: b.js code is guaranteed not to run before a.js

Copy code The code is as follows:

$LAB.script("a.js").wait().script("b.js").wait(function(){

Application.init();

})

In this way, although the two files are downloaded in parallel, it can ensure that a.js can be executed before b.js