Javascript load without blocking

Reading Notes from high-performance JavaScript

Principles:

1. Put the script at the bottom

<Link> it is still in the head to ensure that the normally displayed page can be loaded before js loading.

<Script> before </body>.

2. Group scripts

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

3. Non-blocking scripts

After the page is loaded, load the js Code. That is, the code is downloaded after the window. load event is triggered.

(1) defer attribute: supports IE4 and fierfox3.5 and later browsers

<Script defer>... </script>

Internal and external files

The <script> with the defer attribute can appear anywhere in the document. The corresponding js file will be started to be downloaded when the <script> is parsed, but the code will not be executed, wait until the DOM is loaded (before the onload event handle is called ). So we implemented parallel download with other aliyun.com resources.

(2) Dynamic script elements

The Document Object Model (DOM) allows you to use JavaScript to dynamically create almost all HTML documents.

Copy codeThe Code is 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: no matter where the download is started, the download and running of the file amount will not block other page processing processes. Even in the head (except for the http link used to download files ).

(3) The YUI3 approach

Concept: Use a very small initial code to download the remaining functional code, first introduce the file:

Copy codeThe Code is as follows: <script type = "text/javascript src = http://files.jb51.net/file_images/article/201306/yuanma/combo.js> </script>

This seed file is about 10 KB,

Usage:

Copy codeThe Code is as follows: YUI (). use ("dom", function (Y ){

Y. Dom. addclass (...)

})

When all code is available, the callback function is called. If the YUI instance is passed in as a parameter, the new download function can be used immediately.

The LazyLoad library

Use: first introduce: lazyload-min.js

(4)

Copy codeThe Code is as follows: LazyLoad. js ("a. js", function (){

Appliction. init ();

})

Multiple files:Copy codeThe Code is as follows: LazyLoad. js (["a. js", "B. js"], function (){

Application. init ();

})

(5) The LABjs library

First introduce: lab. js

Copy codeThe Code is as follows: $ LAB. script ("a. js"). wait (function (){

Application. init ();

})

Multiple files are chained

His uniqueness lies in the ability to manage dependencies.

You can use the wait () function to specify which files should be waiting for other files.

For example, the B. js code must not run before a. js.

Copy codeThe 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, a. js can be executed before B. js.