JS异步那些事 五 （异步脚本加载）

JS异步那些事 一 （基础知识）
JS异步那些事 二 （分布式事件）
JS异步那些事 三 （Promise）
JS异步那些事 四（HTML 5 Web Workers）
JS异步那些事 五 （异步脚本加载）

异步脚本加载

阻塞性脚本

JavaScript在浏览器中被解析和执行时具有阻塞的特性，也就是说，当JavaScript代码执行时，页面的解析、渲染以及其他资源的下载都要停下来等待脚本执行完毕

浏览器是按照从上到下的顺序解析页面，因此正常情况下，JavaScript脚本的执行顺序也是从上到下的，即页面上先出现的代码或先被引入的代码总是被先执行，即使是允许并行下载JavaScript文件时也是如此。注意我们这里标红了"正常情况下"，原因是什么呢？我们知道，在HTML中加入JavaScript代码有多种方式，概括如下(不考虑require.js或sea.js等模块加载器)：

（1）正常引入：即在页面中通过<script>标签引入脚本代码或者引入外部脚本
（2）通过document.write方法向页面写入<script>标签或代码
（3）通过动态脚本技术，即利用DOM接口创建<script>元素，并设置元素的src，然后再将元素添加进DOM中。
（4）通过Ajax获取脚本内容，然后再创建<script>元素，并设置元素的text，再将元素添加进DOM中。
（5）直接把JavaScript代码写在元素的事件处理程序中或直接作为URL的主体

具体参考 http://www.jb51.net/article/77920.htm

脚本延迟运行

一般在JS页面延迟执行一些方法。可以使用以下的方法:

Window.setTimeout  

jQuery.delay

jQuery.queue和jQuery.dequeue

<script src="deferdemo.js" defer></script>

加上 defer 等于在页面完全在入后再执行，相当于 window.onload ，但应用上比 window.onload 更灵活！

<script type="text/javascript" src="demo_async.js" async="async"></script>

使用async属性，浏览器会下载js文件，同时继续对后面的内容进行渲染
通常如果js不需要改变DOM结构时可以使用async进行异步加载（比如一些统计代码可以异步加载，因为此代码与页面执行逻辑无关，不会改变DOM结构）

SeaJS与RequireJS

网上写amd和cmd的文章很多，当然也有很多都是误人子弟的片面的看法，所以还是推荐自己看官方文档多加尝试去理解。

“RequireJS 遵循的是 AMD（异步模块定义）规范，SeaJS 遵循的是 CMD （通用模块定义）规范”。

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

amd 规划 https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%87%E7%89%88)

cmd 规范 https://github.com/seajs/seajs/issues/242

区别：

1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）

2. CMD 推崇依赖就近，AMD 推崇依赖前置。

ECMAScript6 Moudle

历史上，JavaScript一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如Ruby的require、Python的import，甚至就连CSS都有@import
到了ES6，实现了模块化的功能，功能上基本可以取代 cmd和amd的规范，

模块的功能主要由两个命令构成，export和import，export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

export的写法，

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName, lastName, year};

上面代码在export命令后面，使用大括号指定所要输出的一组变量。

import写法：

// main.js

import {firstName, lastName, year} from './profile';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

ES6模块加载的实质

ES6模块加载的机制，与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝，而ES6模块输出的是值的引用。CommonJS模块输出的是被输出值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。

ES6模块的运行机制与CommonJS不一样，它遇到模块加载命令import时，不会去执行模块，而是只生成一个动态的只读引用。等到真的需要用到时，再到模块里面去取值，换句话说，ES6的输入有点像Unix系统的”符号连接“，原始值变了，import输入的值也会跟着变。因此，ES6模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。

// mod.js
function C() {
  this.sum = 0;
  this.add = function () {
    this.sum = 1;
  };
  this.show = function () {
    console.log(this.sum);
  }
}

export let c = new C();

上面的脚本mod.js，输出的是一个C的实例。不同的脚本加载这个模块，得到的都是同一个实例。

// x.js
import {c} from './mod';
c.add();

// y.js
import {c} from './mod';
c.show();

// main.js
import './x';
import './y';

现在执行main.js，输出的是1。
证明加载的是同一个实例
参考 http://es6.ruanyifeng.com/#docs/module

总结

写这篇博客参考了很多网上的文章和一些书籍，因为太多就没有一一列举，这也算是我学习js异步知识的一个记录吧。

毕竟马上就要去以一个前端工程师的身份去鹅厂实习了，所以还是要多学点东西，拿点干货出来。

关于JS异步那些事就写到这里了，很多地方理解的不够深刻希望大家多多指教。