Javascript中的defer屬性和async屬性的用法詳解-js教程-PHP中文網

首頁

web前端

js教程

Javascript中的defer屬性和async屬性的用法詳解

云罗郡主

Oct 17, 2018 pm 03:10 PM

這篇文章帶給大家的內容是關於Javascript中的defer屬性和async屬性的用法詳解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

為什麼需要非同步載入js檔案：

不使用非同步，文件在載入js程式碼時會阻塞其他資源的下載，導致空白頁面。

（1）放在頂部的js腳本，瀏覽器在執行時需要花費時間去下載外鏈檔案的程式碼並執行，此時會導致明顯的延遲，顯示為空白頁面，用戶無法瀏覽內容，也無法與頁面互動。

（2）雖然IE8、Firefox3.5、Safari4、Chrome2都允許並行下載Javascript文件，腳本的下載過程不會互相影響，但頁面的加載仍舊需要等到所有的Javascript代碼下載並執行完成才能繼續。正因為如此，建議將<script>標籤置於<body>的底部。 </script>

（3）由於每個<script>標籤下載時都會阻塞頁面渲染，因此建議減少<script>標籤的使用。不僅是外鏈腳本，內嵌腳本也是如此。瀏覽器在解析HTML頁面時每遇到一個<script>標籤都會因為執行腳本而導致一定的延遲。此外，考慮到HTTP請求帶來額外的效能開銷，下載單一100KB的檔案將比下載4個25KB的檔案更快。 </script>

defer和async的用法：

相同點：defer和async都是用來非同步載入腳本。採用並行下載，在下載過程中不會產生阻塞。

不同點：

defer：

（1）即可用於載入外部腳本，也可用於載入內嵌腳本。內嵌腳本僅限於IE9及以下，主流瀏覽器依據W3C的HTML5規格：defer僅當src屬性宣告時生效。

如：

//外部脚本<script src="1.js" defer></script>//内嵌脚本<script defer>
    console.log("defer");</script>

（2）帶有defer屬性的<script>標籤可以放在頁面的任何位置，對應的Javascript檔案會在頁面解析到<script>標籤時開始下載，但不會執行，DOM載入完成後執行（在onload事件之前呼叫）。 </script>

async：

（1）只用於外部腳本。

（2）async載入完成後立即執行。

附：defer屬性的瀏覽器支援情況詳見：https://caniuse.com/#feat=script-defer,搜尋defer即可。

為什麼需要非同步載入js檔案：

不使用非同步，文件在載入js程式碼時會阻塞其他資源的下載，導致空白頁面。

（1）放在頂部的js腳本，瀏覽器在執行時需要花費時間去下載外鏈檔案的程式碼並執行，此時會導致明顯的延遲，顯示為空白頁面，用戶無法瀏覽內容，也無法與頁面互動。
（2）雖然IE8、Firefox3.5、Safari4、Chrome2都允許並行下載Javascript文件，腳本的下載過程不會互相影響，但頁面的加載仍舊需要等到所有的Javascript代碼下載並執行完成才能繼續。正因為如此，建議將