1.正常模式
<script src="index.js"></script>
這種情況下 JS 會阻塞 dom 渲染，瀏覽器必須等待 index.js 加載和執(zhí)行完成后才能去做其它事情
2.async 模式
<script async src="index.js"></script>
async 模式下，它的加載是異步的，JS 不會阻塞 DOM 的渲染，async 加載是無順序的，當(dāng)它加載結(jié)束，JS 會立即執(zhí)行
使用場景：若該 JS 資源與 DOM 元素沒有依賴關(guān)系，也不會產(chǎn)生其他資源所需要的數(shù)據(jù)時，可以使用async 模式，比如埋點(diǎn)統(tǒng)計
3.defer 模式
<script defer src="index.js"></script>
defer 模式下，JS 的加載也是異步的，defer 資源會在 DOMContentLoaded 執(zhí)行之前，并且 defer 是有順序的加載
如果有多個設(shè)置了 defer 的 script 標(biāo)簽存在，則會按照引入的前后順序執(zhí)行，即便是后面的 script 資源先返回
所以 defer 可以用來控制 JS 文件的執(zhí)行順序，比如 element-ui.js 和 vue.js，因為 element-ui.js 依賴于 vue，所以必須先引入 vue.js，再引入 element-ui.js
<script defer src="vue.js"></script> <script defer src="element-ui.js"></script>
defer 使用場景：一般情況下都可以使用 defer，特別是需要控制資源加載順序時
4.module 模式
<script type="module">import { a } from './a.js'</script>
在主流的現(xiàn)代瀏覽器中，script 標(biāo)簽的屬性可以加上 type="module"，瀏覽器會對其內(nèi)部的 import 引用發(fā)起 HTTP 請求，獲取模塊內(nèi)容。這時 script 的行為會像是 defer 一樣，在后臺下載，并且等待 DOM 解析
Vite 就是利用瀏覽器支持原生的 es module 模塊，開發(fā)時跳過打包的過程，提升編譯效率
5.preload
<link rel="preload" as="script" href="index.js">
link 標(biāo)簽的 preload 屬性：用于提前加載一些需要的依賴，這些資源會優(yōu)先加載
vue2 項目打包生成的 index.html 文件，會自動給首頁所需要的資源，全部添加 preload，實(shí)現(xiàn)關(guān)鍵資源的提前加preload 特點(diǎn)：1）preload 加載的資源是在瀏覽器渲染機(jī)制之前進(jìn)行處理的，并且不會阻塞 onload 事件；
2）preload 加載的 JS 腳本其加載和執(zhí)行的過程是分離的，即 preload 會預(yù)加載相應(yīng)的腳本代碼，待到需要時自行調(diào)用；
6.prefetch
<link rel="prefetch" as="script" href="index.js">
prefetch 是利用瀏覽器的空閑時間，加載頁面將來可能用到的資源的一種機(jī)制；通?？梢杂糜诩虞d其他頁面（非首頁）所需要的資源，以便加快后續(xù)頁面的打開速度
prefetch 特點(diǎn)：
1）pretch 加載的資源可以獲取非當(dāng)前頁面所需要的資源，并且將其放入緩存至少5分鐘（無論資源是否可以緩存）
2）當(dāng)頁面跳轉(zhuǎn)時，未完成的 prefetch 請求不會被中斷
加載方式總結(jié)
async、defer 是 script 標(biāo)簽的專屬屬性，對于網(wǎng)頁中的其他資源，可以通過 link 的 preload、prefetch 屬性來預(yù)加載
如今現(xiàn)代框架已經(jīng)將 preload、prefetch 添加到打包流程中了，通過靈活的配置，去使用這些預(yù)加載功能，同時我們也可以審時度勢地向 script 標(biāo)簽添加 async、defer 屬性去處理資源，這樣可以顯著提升性能
鏈接：https://juejin.cn/post/7188894691356573754
來源截取：稀土掘金
浙公網(wǎng)安備 33010602011771號