定義和用法

<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>

defer 屬性規定是否對指令碼執行進行延遲，直到頁面載入為止。其實就是延遲載入js

有的 javascript 指令碼 document.write 方法來建立當前的文件內容，其他指令碼就不一定是了。

如果您的指令碼不會改變文件的內容，可將 defer 屬性加入到 <script> 標籤中，以便加快處理文件的速度。因為瀏覽器知道它將能夠安全地讀取文件的剩餘部分而不用執行指令碼，它將推遲對指令碼的解釋，直到文件已經顯示給使用者為止。

<script type="text/javascript" src="demo_async.js" async="async"></script>

註釋：async 屬性僅適用於外部指令碼（只有在使用 src 屬性時）。

註釋：有多種執行外部指令碼的方法：

• 如果 async="async"：指令碼相對於頁面的其餘部分非同步地執行（當頁面繼續進行解析時，指令碼將被執行）
• 如果不使用 async 且 defer="defer"：指令碼將在頁面完成解析時執行
• 如果既不使用 async 也不使用 defer：在瀏覽器繼續解析頁面之前，立即讀取並執行指令碼

應用場景

defer：很多人也都遇到過這樣的問題，需要直接執行別且操作DOM物件的js 總是報找不到物件的錯誤，原因大家也都知道就是頁面還有沒有載入完畢，js的操作物件還在下載中。但很多人都不知道，新增defer標籤就能輕而易舉的解決這個問題。

async：非同步載入、執行能力讓網站的頁面速度加快。

瀏覽器支援情況

WebKit引擎的瀏覽器(谷歌瀏覽器和Safari瀏覽器)。火狐瀏覽器從3.6版開始支援async 和 defer 屬性。

IE也很早就支援 defer 屬性，但對async屬性不支援，在IE9中支援onload屬性。

defer和async的區別

先來試個一句話解釋仨，當瀏覽器碰到 script

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

   沒有 defer 或 async，瀏覽器會立即載入並執行指定的指令碼，“立即”指的是在渲染該script 標籤之下的文件元素之前，也就是說不等待後續載入的文件元素，讀到就載入並執行。

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

   有 async，載入和渲染後續文件元素的過程將和 script.js 的載入與執行並行進行（非同步）。

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

   有 defer，載入後續文件元素的過程將和 script.js 的載入並行進行（非同步），但是script.js 的執行要在所有元素解析完成之後，DOMContentLoaded 事件觸發之前完成。

然後從實用角度來說呢，首先把所有指令碼都丟到 </body> 之前是最佳實踐，因為對於舊瀏覽器來說這是唯一的優化選擇，此法可保證非指令碼的其他一切元素能夠以最快的速度得到載入和解析。

接著，我們來看一張圖咯：

藍色線代表網路讀取，紅色線代表執行時間，這倆都是針對指令碼的；綠色線代表 HTML 解析。

此圖告訴我們以下幾個要點：

1. defer 和 async 在網路讀取（下載）這塊兒是一樣的，都是非同步的（相較於 HTML 解析）
2. 它倆的差別在於指令碼下載完之後何時執行，顯然 defer 是最接近我們對於應用指令碼載入和執行的要求的
3. 關於 defer，此圖未盡之處在於它是按照載入順序執行指令碼的，這一點要善加利用
4. async 則是一個亂序執行的主，反正對它來說指令碼的載入和執行是緊緊挨著的，所以不管你宣告的順序如何，只要它載入完了就會立刻執行
5. 仔細想想，async 對於應用指令碼的用處不大，因為它完全不考慮依賴（哪怕是最低階的順序執行），不過它對於那些可以不依賴任何指令碼或不被任何指令碼依賴的指令碼來說卻是非常合適的，最典型的例子：Google Analytics