Javascript中的defer屬性和async屬性的用法詳解
- 云罗郡主轉載
- 2018-10-17 15:10:121752瀏覽
這篇文章帶給大家的內容是關於Javascript中的defer屬性和async屬性的用法詳解，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
為什麼需要非同步載入js檔案：
不使用非同步，文件在載入js程式碼時會阻塞其他資源的下載，導致空白頁面。
（1）放在頂部的js腳本，瀏覽器在執行時需要花費時間去下載外鏈檔案的程式碼並執行，此時會導致明顯的延遲，顯示為空白頁面，用戶無法瀏覽內容，也無法與頁面互動。
（2）雖然IE8、Firefox3.5、Safari4、Chrome2都允許並行下載Javascript文件，腳本的下載過程不會互相影響，但頁面的加載仍舊需要等到所有的Javascript代碼下載並執行完成才能繼續。正因為如此，建議將3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤置於6c04bd5ca3fcae76e30b72ad730ca86d的底部。
（3）由於每個3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤下載時都會阻塞頁面渲染，因此建議減少3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤的使用。不僅是外鏈腳本，內嵌腳本也是如此。瀏覽器在解析HTML頁面時每遇到一個3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤都會因為執行腳本而導致一定的延遲。此外，考慮到HTTP請求帶來額外的效能開銷，下載單一100KB的檔案將比下載4個25KB的檔案更快。
defer和async的用法：
相同點：defer和async都是用來非同步載入腳本。採用並行下載，在下載過程中不會產生阻塞。
不同點：
defer：
（1）即可用於載入外部腳本，也可用於載入內嵌腳本。內嵌腳本僅限於IE9及以下，主流瀏覽器依據W3C的HTML5規格：defer僅當src屬性宣告時生效。
如：
//外部脚本//内嵌脚本
（2）帶有defer屬性的3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤可以放在頁面的任何位置，對應的Javascript檔案會在頁面解析到3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤時開始下載，但不會執行，DOM載入完成後執行（在onload事件之前呼叫）。
async：
（1）只用於外部腳本。
（2）async載入完成後立即執行。
附：defer屬性的瀏覽器支援情況詳見：https://caniuse.com/#feat=script-defer,搜尋defer即可。
為什麼需要非同步載入js檔案：
不使用非同步，文件在載入js程式碼時會阻塞其他資源的下載，導致空白頁面。
（1）放在頂部的js腳本，瀏覽器在執行時需要花費時間去下載外鏈檔案的程式碼並執行，此時會導致明顯的延遲，顯示為空白頁面，用戶無法瀏覽內容，也無法與頁面互動。
（2）雖然IE8、Firefox3.5、Safari4、Chrome2都允許並行下載Javascript文件，腳本的下載過程不會互相影響，但頁面的加載仍舊需要等到所有的Javascript代碼下載並執行完成才能繼續。正因為如此，建議將3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤置於6c04bd5ca3fcae76e30b72ad730ca86d的底部。
（3）由於每個3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤下載時都會阻塞頁面渲染，因此建議減少3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤的使用。不僅是外鏈腳本，內嵌腳本也是如此。瀏覽器在解析HTML頁面時每遇到一個3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤都會因為執行腳本而導致一定的延遲。此外，考慮到HTTP請求帶來額外的效能開銷，下載單一100KB的檔案將比下載4個25KB的檔案更快。
defer和async的用法：
相同點：defer和async都是用來非同步載入腳本。採用並行下載，在下載過程中不會產生阻塞。
不同點：
defer：
（1）即可用於載入外部腳本，也可用於載入內嵌腳本。內嵌腳本僅限於IE9及以下，主流瀏覽器依據W3C的HTML5規格：defer僅當src屬性宣告時生效。
如：
//外部脚本//内嵌脚本
（2）帶有defer屬性的3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤可以放在頁面的任何位置，對應的Javascript檔案會在頁面解析到3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤時開始下載，但不會執行，DOM載入完成後執行（在onload事件之前呼叫）。
async：
（1）只用於外部腳本。
（2）async載入完成後立即執行。
附：defer屬性的瀏覽器支援情況詳見：https://caniuse.com/#feat=script-defer,搜尋defer即可。
以上就是Javascript中的defer屬性和async屬性的用法詳解的全部介紹，如果您想了解更多有關JavaScript影片教學，請關注PHP中文網。
以上是Javascript中的defer屬性和async屬性的用法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！