defer和async產生的原因

HTML 網頁中，瀏覽器通過<script>標簽載入 JavaScript 腳本。
<!-- 頁面內嵌的腳本 -->
<script type="application/javascript">
  // module code
</script>

<!-- 外部腳本 -->
<script type="application/javascript" src="path/to/myModule.js">
</script>

由於瀏覽器腳本的預設語言是 JavaScript。
因此type="application/javascript"是可以省略。
預設情況下，瀏覽器是同步載入 JavaScript 腳本.
就是說渲染引擎遇到<script>標簽就會停下來，等到執行完腳本，再繼續向下渲染。
如果是外部腳本，還必須加入腳本下載的時間。

如果腳本體積很大，下載和執行的時間就會很長。
因此造成瀏覽器堵塞，用戶會感覺到瀏覽器“卡死”,用戶體驗不好
所以瀏覽器允許腳本非同步載入，下麵就是兩種非同步載入的語法。

<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>

defer和async的簡單介紹

<script>標簽上有defer或async屬性，腳本就會非同步載入。
渲染引擎遇到這一行命令，就會開始下載外部腳本.
但不會等它下載和執行，而是直接執行後面的命令。

defer與async的區別是[面試題]

defer要等到整個頁面在記憶體中正常渲染結束（DOM 結構完全生成，以及其他腳本執行完成），才會執行；
async一旦下載完，渲染引擎就會中斷渲染，執行這個腳本以後，再繼續渲染。
一句話，defer是“渲染完再執行”，async是“下載完就執行”。
另外，如果有多個defer腳本，會按照它們在頁面出現的順序載入，
而多個async腳本是不能保證載入順序的。

ES6中script標簽module的作用

瀏覽器對於帶有type="module"的<script>，都是非同步載入。
不會造成堵塞瀏覽器的。
即等到整個頁面渲染完，再執行模塊腳本，
等同於打開了<script>標簽的defer屬性。

用代碼來描述
<script type="module" src="./foo.js"></script>
<!-- 等同於 -->
<script type="module" src="./foo.js" defer></script>


如果網頁有多個<script type="module">，它們會按照在頁面出現的順序依次執行。
<script>標簽的async屬性也可以打開，這時只要載入完成，
渲染引擎就會中斷渲染立即執行。執行完成後，再恢復渲染。
<script type="module" src="./foo.js" async></script>
一旦使用了async屬性，
<script type="module">就不會按照在頁面出現的順序執行，
而是只要該模塊載入完成，就執行該模塊。

遇見問題，這是你成長的機會，如果你能夠解決，這就是收穫。

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯繫你；(っ•̀ω•́)っ✎⁾⁾！

如果覺得這篇文章對你有小小的幫助的話，記得在右下角點個“推薦”哦，或者關註博主，在此感謝！

萬水千山總是情，打賞5毛買辣條行不行，所以如果你心情還比較高興，也是可以掃碼打賞博主(っ•̀ω•́)っ✎⁾⁾！

想問問題，打賞了卑微的博主，求求你備註一下的扣扣或者微信；這樣我好聯繫你；(っ•̀ω•́)っ✎⁾⁾！