script 異步加載 async 和 defer的區別

時間 2020-03-04

標籤 script 異步加載 async defer 區別简体版

原文原文鏈接

在HTML被解析的時候，若是遇到 <script> 標籤，就會先暫停HTML解析，當即執行腳本（非外部js文件）。<script src="./1.js"> 引入的外部js文件狀況下會先下載再執行。
因此，若是在HTML解析期間被執行 js 腳本且計算量很大的狀況下（循環十萬次），那麼頁面就會形成卡頓和白屏現象。html

這也是爲何 <script> 腳本建議寫在 <body></body> 標籤內的最後面，就是爲了加快 HTML DOM 樹的構建。web

我非要把 <script> 標籤寫在頭部呢？那麼就能夠根據場景合理應用 async（異步）和 defer（延遲）加載技術了。異步

<script>

從一個沒有任何屬性的 <script> 標籤提及，HTML解析階段若是遇到 <script>標籤，就會中止後續的DOM樹建立，當即下載（引入的外部js文件）並執行，執行完畢再繼續解析HTML。async

async

async 爲異步加載，在HTML解析階段並行下載外部的 js 文件，下載完成後暫停 HTML 解析器執行 js 文件。執行完畢後繼續 HTML 的解析模塊化

defer

defer 爲延遲腳本。在 HTML 解析階段並行下載外部的 js 文件，下載完成後並不會當即執行，而是在 HTML 解析完成後 DOMContentLoaded 事件觸發以前執行 js 文件。延遲加載也保證在文檔中出現的順序執行。3d

什麼時候使用 async 和 defer 呢？

若是引入的 js 文件是模塊化，不依賴任何腳本的狀況下，能夠使用 async 異步腳本
引入的 js 文件依賴或者被其餘 js 文件依賴，那麼使用 defer 延遲腳本

參考文檔：
https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.htmlhtm

相關文章

相關標籤/搜索

su和sudo區別

XLink 和 XPointer 教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<