快捷導(dǎo)航

淺談async、defer以普通script加載的區(qū)別

更新時間：2023年05月12日 16:08:24 作者：白哥學(xué)前端

本文主要介紹了淺談async、defer以普通script加載的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

如果用一張圖片詮釋這幾種script加載的特點(diǎn)，應(yīng)該是這樣的：

結(jié)合圖片我們可以將三種方式的特點(diǎn)總結(jié)如下：

<script> : 當(dāng)HTML解析過程中遇到script標(biāo)簽時，瀏覽器中斷HTML解析，隨即下載script文件，完成后立即執(zhí)行script，執(zhí)行完成后再繼續(xù)HTML解析
<script async> : 當(dāng)HTML解析過程中遇到script標(biāo)簽時，不會中斷HTML解析，同時并行下載script文件，下載完成后中斷HTML解析并執(zhí)行script，執(zhí)行完成后再繼續(xù)HTML解析（script的執(zhí)行順序不一定按照script標(biāo)簽的出現(xiàn)順序，而是取決于script下載完成的順序）
<script defer> : 當(dāng)HTML解析過程中遇到script標(biāo)簽時，不會中斷HTML解析，同時并行下載script文件，直到HTML解析完成再執(zhí)行script（script的執(zhí)行順序與script標(biāo)簽出現(xiàn)順序一致）

我們可以通過一個小項(xiàng)目驗(yàn)證上面的結(jié)論。

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <script>
    console.time('timer');
    console.timeLog('timer', '--- Start parsing HTML');
    document.addEventListener('DOMContentLoaded', function () {
      console.timeLog('timer', '--- Document loaded');
    });
  </script>
</head>
<body>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo harum velit itaque assumenda, quibusdam
    obcaecati suscipit quasi odit accusantium soluta qui, debitis quae iusto? Nobis ratione ut nesciunt a minima.
  </p>
  <!-- 此處省略500行重復(fù)元素 -->
  <script>console.timeLog('timer', '--- Start loading 1.js')</script>
  <script src='./1.js'></script>
  <script>console.timeLog('timer', '--- Start loading 2.js')</script>
  <script src='./2.js'></script>
  <script>console.timeLog('timer', '--- Start loading 3.js')</script>
  <script src='./3.js'></script>
  <!-- 此處省略1500行重復(fù)元素 -->
   <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo harum velit itaque assumenda, quibusdam
    obcaecati suscipit quasi odit accusantium soluta qui, debitis quae iusto? Nobis ratione ut nesciunt a minima.
  </p>
  <script>
    console.timeLog('timer', '--- End parsing HTML')
  </script>
</body>
</html>

1.js:

const text1 = `
  // 超長文本
`
text1.split(' ');
console.timeLog('timer', '--- 1.js excuted');

2.js:

const text2 = `
  // 超長文本
`
text2.split(' ');
console.timeLog('timer', '--- 2.js excuted');

3.js:

const text3 = `
  // 超長文本
`
text3.split(' ');
console.timeLog('timer', '--- 3.js excuted');

我們分別使用普通、async和defer的方式加載1.js、2.js、3.js，觀察控制臺的打印結(jié)果：

普通:

結(jié)論：script出現(xiàn)會中斷HTML加載，且script會順序的加載、執(zhí)行，所有script執(zhí)行完成后再解析HTML。

Async:

結(jié)論：HTML解析和script下載同步進(jìn)行，script執(zhí)行會中斷HTML解析；script執(zhí)行順序和tag出現(xiàn)順序不一定相同；script可能會在document loaded之后執(zhí)行。

Defer:

結(jié)論：HTML解析和script下載同步進(jìn)行；script會在HTML解析完成后和document loaded之前執(zhí)行，且執(zhí)行順序和tag出現(xiàn)順序一致。

由以上實(shí)驗(yàn)可知：如果使用普通方式時通常建議將script放到<body>的最后，以免阻塞HTML解析影響網(wǎng)頁打開速度。而defer相對于async更具優(yōu)勢，不會阻塞HTML解析且script的執(zhí)行順序可以預(yù)測，有一些需要預(yù)先下載執(zhí)行的script可以使用defer的方式在<head>中引用。

到此這篇關(guān)于淺談async、defer以普通script加載的區(qū)別的文章就介紹到這了,更多相關(guān)async、defer以及普通script加載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: