JavaScript non-blocking loading specific way

Read the reading notes of high performance JavaScript

Several principles:

1, put the script on the bottom

<link> in head, to ensure that before JS load, can load the normal display of the page.

<script> put it in front of </body>.

2. Group Scripts

Because the page parsing process is blocked for each <script> tag download, limiting the total number of <script> pages can also improve performance. Applies to inline scripts and external scripts.

3. Non-blocking scripts

After the page completes loading, then load the JS code. That is, start downloading the code after the Window.load event is issued.

(1) Defer properties: Support for IE4 and fierfox3.5 later browsers

<script defer>...</script>

inline and external files

<script> with the Defer property can appear anywhere in the document, and the corresponding JS file will start the download when <script> is resolved, but the code will not execute until the DOM is loaded (before the OnLoad event handle is invoked). So realized and also show off other resources in parallel to download.

(2) Dynamic scripting elements

The Document Object Model (DOM) allows you to dynamically create almost all of the document content of HTML using JS.

Copy Code code as follows:


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

Script.type= "Text/javascript";

Script.src= "File.js";

Document.getelementbytagname_r ("Head") [0].appendchild (script);

The focus of this technology is that no matter where you start the download, the amount of file downloads and runs will not block other page processes. Even in the head (except for HTTP links for downloading files).

(3) The YUI3 approach

Idea: With a very small initial code, download the rest of the functional code, first introduced the file:

Copy Code code as follows:


&lt;script type= "Text/javascript src=http://files.jb51.net/file_images/article/201306/yuanma/combo.js&gt; &lt;/script&gt;

This seed file is about 10KB,

Use:

Copy Code code as follows:


YUI (). Use ("Dom", function (Y) {

Y.dom.addclass (...)

})

When all code is available, the callback function is invoked, and the Yui instance is passed as a parameter, and the newly downloaded feature can be used immediately.

The Lazyload Library

Using: first introduced: Lazyload-min.js

(4)

Copy Code code as follows:


lazyload.js ("A.js", function () {

Appliction.init ();

})

Multiple files:

Copy Code code as follows:


lazyload.js (["A.js", "B.js"],function () {

Application.init ();

})

(5) The LABJS Library

Introduce first: Lab.js

Copy Code code as follows:


$LAB. Script ("A.js"). Wait (function () {

Application.init ();

})

Multiple files, on a chain-style notation

His uniqueness lies in his ability to manage dependency relationships.

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

For example: B.js's code guarantees that it does not run before A.js

Copy Code code as follows:


$LAB. Script ("A.js"). Wait (). Script ("B.js"). Wait (function () {

Application.init ();

})

In this way, although two files are downloaded in parallel, the a.js can be guaranteed to execute before B.js