js的延遲加載

js的延遲加載一般用於提升頁面的加載速度，通常情況下有以下幾種方式：

1.通過script的標籤async

<script src="a.js"></script>
<script src="b.js" async="async"></script>
<script src="c.js"></script>

async標籤表示應該立即下載b.js，但是同時不妨礙瀏覽器下載其他資源，也就是不阻塞瀏覽器執行其他操作。
但是會在下載結束後立即執行，同時會在windows的load事件前執行，所以會出現執行順序被打亂的情況。
所以不推薦使用。
正常執行順序 a.js =>b.js=>c.js
加入async的執行順序a.js和c.js的順序不變，但是b.js會在下載完畢後立即執行。

2.通過script的標籤defer

<script src="a.js"></script>
<script src="b.js" defer="defer"></script>
<script src="c.js"></script>

defer標籤痛async標籤一樣的地方是都不會阻塞頁面的渲染加載。
不同與在於defer是立即下載但是不會在下載完畢後就執行，而是等到html標籤結束後才執行。
不會打亂，而是會按照原有的順序執行js。
正常執行順序 a.js =>b.js=>c.js
加入defer的執行順序a.js =>c.js=>b.js
只是下載的時候相當於異步下載。

3.動態添加

原理和前兩種一樣。

(function(){
	 var scriptEle = document.createElement("script");
	 scriptEle.type = "text/javasctipt";
	 scriptEle.async = true;
	 scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
	 var x = document.getElementsByTagName("head")[0];
	 x.insertBefore(scriptEle, x.firstChild); 
 })();

4.通過setTimeout進行延遲加載

emmm網上都有很多說這種方法，不過經測試這樣沒什麼用，雖然引入了，但是a.js裏面的代碼根本不執行。不知道是不是我的理解有錯。如果哪位知道的能留言告知就最好了，謝謝。

<script src="" id="last"></script>
<script>
	var last = document.getElementById('last')
	setTimeout(function(){
		last.src = 'a.js'
	}, 1000)
</script> 

其他方法

肯定還有其他辦法，當然常用的應該就是這幾種辦法了。
ps: 一般情況下，我們都將script標籤放在</body>前面，防止阻塞。