javascript文件加载模式与加载方法

加载方式

形象图像化方法，见

http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

1、 script标签， 无 async defer， 则script文件下载和执行的过程， 会阻塞后面html标签的解析，进而影响页面渲染。

2、script标签， 有defer， 则script文件下载过程，不会阻塞后续html解析（即并发）， 在所有html解析完毕后， 才执行下载的script文件。

3、script标签， 有async， 则script文件下载过程， 不会阻塞后续html解析（即并发），下载完毕后立刻执行， 执行过程会阻塞下载完时刻html解析点之后的html解析， script执行完毕后， hmtl解析立刻执行。

协程的解释：

http://ued.ctrip.com/blog/script-defer-and-async.html

使用 defer 和 async 属性， 可以加快页面渲染的速度。

但是如何才能保证js文件的前后依赖顺序， 下面介绍一个库。

js加载方法

同步加载库：

https://github.com/azev/JSLoad

JSLoad dynamicaly and synchronously loads CSS and JS files.

Usage:

  JSLoad.load(
		[ '/plugins/style-sheet1.css'
		, 'http://whatever-cdn.com/style-sheet2.css'
		, 'https://cdnjs.cloudflare.com/ajax/libs/1140/2.0/1140.min.css'
		, 'http://code.jquery.com/jquery-2.1.4.min.js'
		, 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'
		]
	, callback);

The callback function is called after all dependencies are loaded.
To avoid double loading, JSLoad will skip files with the same name.

异步加载库

https://github.com/alinoch/jsloader

JsLoader

A little and light script that loads asynchronously .js files and executes callback functions after certain files have been loaded or after all files are loaded. If an array of files is given they are loaded in the same order as their order in the array, so there shouldn't be any dependency issues.

Quick user guide

In order to use it just add jsLoader.min.js to your page. You can use the loadFiles method:

Synthax:

JsLoader.loadFiles({string|array} files, {function} callback, [{boolean} debug]);

Sample codes:

• Load a single file:

JsLoader.loadFiles(
    'localJsFile.js',
    function() {
        addMessage('1. Loaded a single file (localJsFile.js) and executed a callback');
    }
);

• Load more files and set the debug mode to on:

JsLoader.loadFiles(
    ['localJsFile.js', 'anotherLocalJsFile.js'],
    function() {
        addMessage('2. Loaded more files (localJsFile.js and anotherLocalJsFile.js) and executed a callback');
    },
    true
);

• Load more files, do a callback for one file, then do a final callback:

JsLoader.loadFiles(
    [
        {src: 'localJsFile.js', callback: function() {console.log('callback: loaded localJsFile.js')}},
        'anotherLocalJsFile.js'
    ],
    function() {
        addMessage('3. Loaded more files (localJsFile.js and anotherLocalJsFile.js), executed a callback after the 1st one was loaded (see console), then executed a callback after all files were loaded');
    },
    true
);

• You can use an object as the parameter for the function:

JsLoader.loadFiles(
    {
        files: [
            {src: 'localJsFile.js', callback: function() {console.log('callback: loaded localJsFile.js...')}},
            {src: 'anotherLocalJsFile.js', callback: function() {console.log('callback: ... and loaded anotherLocalJsFile.js')}}
        ],
        callback: function() {
            addMessage('4. Loaded more files (localJsFile.js and anotherLocalJsFile.js), did a callback after each one, then did a final callback');
        },
        debug: true
    }
);

Browser support & dependencies

This script does not require any library, since it is written in native javascript. It should work on all popular browsers (including the ancient IE6 :))

Demo

You can see some exapmples in action if you download and open the demo.html file.

jquery加载语句

https://api.jquery.com/jQuery.getScript/

jQuery.getScript( url [, success ] )Returns: jqXHR

Description: Load a JavaScript file from the server using a GET HTTP request, then execute it.

• version added: 1.0jQuery.getScript( url [, success ] )

  • url
    Type: String
    A string containing the URL to which the request is sent.
  • success
    Type: Function( String script, String textStatus, jqXHR jqXHR )
    A callback function that is executed if the request succeeds.

$.getScript( "ajax/test.js" )

.done(function( script, textStatus ) {

console.log( textStatus );

})

.fail(function( jqxhr, settings, exception ) {

$( "div.log" ).text( "Triggered ajaxError handler." );

});