DomContentLoaded、load 以及 script腳本的async、defer

1. 先來了解一下什麼是DOMContentLoaded和load

原文描述-簡書 

有興趣看原文，這裏不加贅述。簡單來說DOMContentloaded是頁面中的DOM元素解析完成時，而load是內嵌資源加載完成時觸發

2. defer 和 async

淺談async和defer   DomContentLoaded詳解

當在script標籤上什麼都不加是，解析和腳本加載會同步進行

而使用defer後，會異步的解析，腳本會在Dom解析完成，DomContentloaded觸發前執行

使用async後，同樣會異步解析，但是腳本的執行不會影響DOMContentLoaded的觸發

3. 總結

如果你的腳本需要依賴Dom元素（文檔是否渲染完畢）， 或者被其他腳本文件依賴，推薦使用defer

如果你的腳本並不關心Dom元素，並且he其他腳本沒有依賴關係，那麼推薦使用async