async && defer
<script src="script.js"></script>
沒(méi)有 defer 或 async，瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指的是在渲染該 script 標(biāo)簽之下的文檔元素之前，也就是說(shuō)不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。
async
<script async src="script.js"></script>
有 async，加載和渲染后續(xù)文檔元素的過(guò)程將和 script.js 的加載與執(zhí)行并行進(jìn)行（異步）。
defer
<script defer src="myscript.js"></script>
有 defer，加載后續(xù)文檔元素的過(guò)程將和 script.js 的加載并行進(jìn)行（異步），但是 script.js 的執(zhí)行要在所有元素解析完成之后，DOMContentLoaded 事件觸發(fā)之前完成。
web_defer.png
Nuxt 添加defer
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js', defer: true }
總結(jié)
- defer和async都不會(huì)阻止Document的解析，都是異步
- defer會(huì)在DOMContentLoaded前依次按照加載順序執(zhí)行腳本
- async則是下載完立即執(zhí)行，不一定是在DOMContentLoaded前
- async因?yàn)轫樞驘o(wú)關(guān)，所以很適合Google Analytics這樣的無(wú)依賴腳本
prefetch
MDN 解釋 prefetch
link prefetch 是一種瀏覽器機(jī)制，其利用瀏覽器空閑時(shí)間來(lái)下載或預(yù)取用戶在不久的將來(lái)可能訪問(wèn)的文檔。頁(yè)面向?yàn)g覽器提供一組預(yù)取提示，并在瀏覽器完成當(dāng)前頁(yè)面的加載后開(kāi)始靜默的拉取執(zhí)行的文檔并將其存儲(chǔ)在緩存中。當(dāng)用戶訪問(wèn)其中一個(gè)預(yù)取文檔時(shí)，便可以快速的從瀏覽器緩存中得到
預(yù)加載Link prefetch寫(xiě)法
HTML5頁(yè)面資源預(yù)加載/預(yù)讀取功能是通過(guò)Link標(biāo)記實(shí)現(xiàn)的，將rel屬性指定為prefetch，在href屬性指定要加載的資源地址。
<link rel="prefetch" href="/images/big.jpeg">
prefetch在什么情況下使用
- 當(dāng)頁(yè)面有幻燈片類似的服務(wù)時(shí)，預(yù)加載/預(yù)讀取接下來(lái)的1-3頁(yè)和之前的1-3頁(yè)。
- 預(yù)加載那些整個(gè)網(wǎng)站通用的圖片。
- 預(yù)加載網(wǎng)站上搜索結(jié)果的下一頁(yè)。
預(yù)加載注意事項(xiàng)
- 預(yù)加載(Link prefetch)不能跨域工作，包括跨域拉取cookies。
- 預(yù)加載(Link prefetch)會(huì)污染你的網(wǎng)站訪問(wèn)量統(tǒng)計(jì)，因?yàn)橛行╊A(yù)加載到瀏覽器的頁(yè)面用戶可能并未真正訪問(wèn)。
- 火狐瀏覽器從2003年開(kāi)始就已經(jīng)提供了對(duì)這項(xiàng)預(yù)加載(Link prefetch)技術(shù)的支持
參考鏈接
