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腳本是不能保證加載順序的。