javascript的異步加載

什麼是異步加載javascript

使js文件脫離html解析的瀑布流加載，可以實現並行下載。

爲什麼要使用異步加載

默認方式是同步加載，一般將js寫在head裏，這就會導致在進行js加載的過程中，無法在其加載完成前對後續的內容進行操作，造成頁面內阻塞，對用戶體驗很不友好。

異步加載的方式

1.defer異步加載

• 用於開啓新的線程下載腳本文件，並使腳本在文檔解析完成後執行
• h5的新屬性，主要用來延遲腳本的執行，只支持IE瀏覽器
• defer只適用於外聯腳本，如果script標籤沒有指定src屬性，只是內聯腳本，不要使用defer
• 如果有多個聲明瞭defer的腳本，則會按順序下載和執行
• defer腳本會在DOMContentLoaded和load事件之前執行

//異步加載 只能ie能用，不能在標籤裏寫代碼
<script src="./user.js" defer="defer"></script>

2.async異步加載

• HTML5新增屬性，用於異步下載腳本文件，下載完畢立即解釋執行代碼
• async只能加載外部腳本，不能把js寫在script標籤裏
• 多個聲明瞭async的腳本，其下載和執行也是異步的，不能確保彼此的先後順序
• async會在load事件之前執行，但並不能確保與DOMContentLoaded的執行先後順序

// w3c標準方法，能在標籤裏寫代碼
<script src="./user.js" aysnc="aysnc"></script> 

3.創建script，插入dom中，叫做Script DOM Element：

test.js

console.log("I am test.js")

<script>
	var script = document.createElement('script'); 　　//創建
    script.type = 'text/javascript'; 　　　　　　　　　//設置
      //下載文件，當下載時它會發送請求，發請求過程中，頁面已經解析完,系統解析很速度很快
     var src = "test.js";　　　　　　　　
     var x = document.getElementsByTagName('script')[0];
     x.parentNode.insertBefore(script, x);
   	// 控制檯輸出： I am test.js
</script>

4.onload時的異步加載

<script>
	//兼容ie，因爲ie的window上沒有addEventListener
	if(window.attachEvent){
    	window.attachEvent("load", asyncLoad);   
    }else{ //非ie
    	window.addEventListener("load", asyncLoad);
    }
   var asyncLoad = function () {
	  //異步操作的代碼
   }　　
</script>

DOMContentLoaded 與 OnLoad 事件

DOMContentLoaded : 頁面(document)已經解析完成，頁面中的dom元素已經可用。但是頁面中引用的圖片、subframe可能還沒有加載完。
OnLoad：頁面的所有資源都加載完畢（包括圖片）。瀏覽器的載入進度在這時才停止。
這兩個時間點將頁面加載的timeline分成了三個階段。

其他異步加載的方法：

• XHR Eval
• XHR Injection
• Script in Iframe
• document.write Script Tag
• setTimeout 延遲0秒

延遲加載（懶加載）

定義：有些 js 代碼並不是頁面初始化的時候就立刻需要的，而稍後的某些情況才需要的。延遲加載就是一開始並不加載這些暫時不用的js，而是在需要的時候或稍後再通過js 的控制來異步加載。
就像圖片的延遲加載，在圖片出現在可視區域內時（在滾動條下拉）才加載顯示圖片。