script标簽中defer和async屬性的差別

向html頁面中插入javascript代碼的主要方法就是通過script标簽。其中包括兩種形式，第一種直接在script标簽之間插入js代碼，第二種即是通過src屬性引入外部js檔案。由于解釋器在解析執行js代碼期間會阻塞頁面其餘部分的渲染，對于存在大量js代碼的頁面來說會導緻浏覽器出現長時間的空白和延遲，為了避免這個問題，建議把全部的js引用放在</body>标簽之前。

　　script标簽存在兩個屬性，defer和async，是以script标簽的使用分為三種情況：

　　1.<script src="example.js"></script>

　　　沒有defer或async屬性，浏覽器會立即加載并執行相應的腳本。也就是說在渲染script标簽之後的文檔之前，不等待後續加載的文檔元素，讀到就開始加載和執行，此舉會阻塞後續文檔的加載；

　　2.<script async src="example.js"></script>

　　   有了async屬性，表示後續文檔的加載和渲染與js腳本的加載和執行是并行進行的，即異步執行；

　　3.<script defer src="example.js"></script>

         有了defer屬性，加載後續文檔的過程和js腳本的加載(此時僅加載不執行)是并行進行的(異步)，js腳本的執行需要等到文檔所有元素解析完成之後，DOMContentLoaded事件觸發執行之前。

　　下圖可以直覺的看出三者之間的差別:

　　

　　其中藍色代表js腳本網絡加載時間，紅色代表js腳本執行時間，綠色代表html解析。

　　從圖中我們可以明确一下幾點：

　　1.defer和async在網絡加載過程是一緻的，都是異步執行的；

　　2.兩者的差別在于腳本加載完成之後何時執行，可以看出defer更符合大多數場景對應用腳本加載和執行的要求；

　　3.如果存在多個有defer屬性的腳本，那麼它們是按照加載順序執行腳本的；而對于async，它的加載和執行是緊緊挨着的，無論聲明順序如何，隻要加載完成就立刻執行，它對于應用腳本用處不大，因為它完全不考慮依賴。

本文轉自    風雨蕭條 部落格，原文連結： http://blog.51cto.com/1095221645/1914780       如需轉載請自行聯系原作者