js時間線及defer async

1.建立Document對象，開始解析web頁面，解析HTML元素和他們的文本內容後添加Element對象和Text節點到文檔中。這個階段Document。readyState = "loading"。

 2.遇到link外部css，建立線程加載，並繼續解析文檔。

 3.遇到script外部js，而且沒有設置async ， defer ，瀏覽器加載，並阻塞，等待js加載完成並執行該腳本，而後繼續解析文檔

 4.遇到script外部js，而且設置有async，defer 瀏覽器建立線程加載，並繼續解析文檔，對於async屬性的腳本，腳本加載完成後當即執行（異步禁止使用docuemnt.write（））。

 5.遇到img標籤等，先正常解析dom結構，而後瀏覽器異步加載src，並繼續解析文檔

 6.當文檔解析完成，document.readyState = "interactive"；

 7.文檔解析完成後，全部設置有defer的腳本會按照順序執行。

 8..當文檔解析完成以後，document對象觸發DOMContentLoaded事件，這也標誌着程序執行從同步腳本執行階段，轉化爲事件驅動階段

 9.當全部saync的腳本加載完成並執行後，img等加載完成後，document.readyState = "complete" window對象觸發load事件

10.今後，頁面以異步響應方式處理用戶輸入，網絡事件等。

defer  

若是script標籤設置了該屬性，則瀏覽器會異步的下載該文件而且不會影響到後續DOM的渲染；
若是有多個設置了defer的script標籤存在，則會按照順序執行全部的script；
defer腳本會在文檔渲染完畢後，DOMContentLoaded事件調用前執行

aysnc

async的設置，會使得script腳本異步的加載並在容許的狀況下執行
async的執行，並不會按着script在頁面中的順序來執行，而是誰先加載完誰執行。

 

四個js文件裏分別是1，2，3，4

<script>

        console.log(0)

 </script>

   <script  src="sc1.js"></script>

　<script src="sc2.js"></script>

    <script  src="sc3.js"></script>

    <script src="sc4.js"></script>

    再沒有作任何改變的時候輸出 0 1 2 3 4

當給第三個加上defer 或者aysnc屬性的時候 結果變成 0 1 2 4 3

 

<script>

        console.log(0)

        

    </script>

    <script  src="sc3.js"></script>

    <script  async src="sc4.js"></script>

    <script src="sc2.js"></script>

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

結果爲0 3 2 4 1 

二者都不會阻止 document 的解析

defer 會在 DOMContentLoaded 前依次執行 （能夠利用這兩點哦！）

async 則是下載完當即執行，不必定是在 DOMContentLoaded 前

async 由於順序無關，因此很適合像 Google Analytics 這樣的無依賴腳本