ES6模块和CommonJS模块有哪些差别？

ES6模块特色

1. 设计思想是尽可能静态化（编译时加载），使得编译时就能肯定模块的依赖关系、输入输出变量。
2. 因为 ES6 模块是编译时加载，使得静态分析成为可能。
3. ES6 模块不是对象，而是经过export命令显式指定输出的代码，再经过import命令输入。
4. ES6 模块之中，顶层的this指向undefined，即不该该在顶层代码使用this。
5. export语句输出的接口，与其对应的值是动态绑定关系，即经过该接口，能够取到模块内部实时的值。
6. import命令输入的变量都是只读的，由于它的本质是输入接口
7. import命令具备提高效果，会提高到整个模块的头部，首先执行。
8. import语句会执行所加载的模块。

CommonJS

1. 运行时肯定模块的依赖关系、输入输出变量
2. CommonJS 模块输出的是值的缓存，不存在动态更新
3. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。 CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
4. 就是this关键字。ES6 模块之中，顶层的this指向undefined；CommonJS 模块的顶层this指向当前模块，这是二者的一个重大差别。

let {m1,m2,m3}  = require('modules')
            <=>
let m = require('modules') //总体加载modules模块
let m1 = m.m1
let m2 = m.m2
let m3 = m.m3
复制代码

AMD

实现AMD的工具库 require.js

1. 运行时肯定模块的依赖关系、输入输出变量
2. 全局定义define函数
3. 全局定义require函数
4. 依赖的JS会自动异步加载

比较

1. 由于require是运行时加载模块，import命令没法取代require的动态加载功能。
2. import()相似于 Node的require方法，区别主要是前者是异步加载，后者是同步加载。

浏览器异步加载脚本的方法

<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>
复制代码

渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。

defer和async的区别

defer与async的区别是：defer要等到整个页面在内存中正常渲染结束（DOM 结构彻底生成，以及其余脚本执行完成），才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本之后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，若是有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。