在js引擎部分，我們可以了解到，當渲染引擎解析到script標簽時，會將控制權給JS引擎，如果script加載的是外部資源，則需要等待下載完后才能執(zhí)行。 所以，在這里，我們可以對其進行很多優(yōu)化工作。

放置在BODY底部

為了讓渲染引擎能夠及早的將DOM樹給渲染出來，我們需要將script放在body的底部，讓頁面盡早脫離白屏的現(xiàn)象，即會提早觸發(fā)DOMContentLoaded事件. 但是由于在IOS Safari, Android browser以及IOS webview里面即使你把js腳本放到body尾部，結果還是一樣。 所以這里需要另外的操作來對js文件加載進行優(yōu)化.

DEFER加載

這是HTML4中定義的一個script屬性，它用來表示的是，當渲染引擎遇到script的時候，如果script引用的是外部資源，則會暫時掛起，并進行加載。 渲染引擎繼續(xù)解析下面的HTML文檔，解析完時，則會執(zhí)行script里面的腳本。

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

他的支持度是<=IE9的.

并且，他的執(zhí)行順序，是嚴格依賴的，即:

<script src="outside1.js" defer></script><script src="outside2.js" defer></script>

當頁面解析完后，他便會開始按照順序執(zhí)行 outside1 和 outside2文件。

如果你在IE9以下使用defer的話，可能會遇到 它們兩個不是順序執(zhí)行的，這里需要一個hack進行處理，即在兩個中間加上一個空的script標簽

<script src="outside1.js" defer></script><script></script> //hack<script src="outside2.js" defer></script>

ASYNC加載

async是H5新定義的一個script 屬性。 他是另外一種js的加載模式。

渲染引擎解析文件，如果遇到script(with async)

繼續(xù)解析剩下的文件，同時并行加載script的外部資源

當script加載完成之后，則瀏覽器暫停解析文檔，將權限交給JS引擎，指定加載的腳本。

執(zhí)行完后，則恢復瀏覽器解析腳本

可以看出async也可以解決 阻塞加載 這個問題。不過，async執(zhí)行的時候是異步執(zhí)行，造成的是，執(zhí)行文件的順序不一致。即:

<script src="outside1.js" async></script><script src="outside2.js" async></script>

這時，誰先加載完，就先執(zhí)行誰。所以，一般依賴文件就不應該使用async而應該使用defer.

defer的兼容性比較差，為IE9+,不過一般是在移動端使用，也就不存在這個problem了。

腳本異步

腳本異步是一些異步加載庫(比如require)使用的基本加載原理. 直接上代碼:

function asyncAdd(src){  var script = document.createElement('script');  script.src = src;  document.head.appendChild(script);}//加載js文件asyncAdd("test.js");