歡迎訪問我的博客，祝碼農(nóng)同胞們?cè)缛兆呱先松鷰p峰，迎娶白富美~~~
文章目錄
- 1 同步加載
- 2 異步加載
- 3 延遲加載
- 4 預(yù)加載
1 同步加載
常默認(rèn)的是同步加載
<script src="http://yourdomain.com/script.js"></script>
同步模式又稱阻塞模式，會(huì)阻止瀏覽器的后續(xù)操作，相當(dāng)于阻止了后續(xù)的文件的解析，執(zhí)行等。
流覽器之所以會(huì)采用同步模式，是因?yàn)榧虞d的
js文件中有對(duì)dom的操作，重定向，輸出document等默認(rèn)行為，所以同步才是最安全的。通常加載
js文件或者放<script>標(biāo)簽都在結(jié)構(gòu)最后面，也是因?yàn)樗鼤?huì)阻止瀏覽器后續(xù)操作的原因，所以放在后面，當(dāng)頁(yè)面結(jié)構(gòu)和樣式全部渲染完成再執(zhí)行js，提升用戶體驗(yàn)
2 異步加載
異步加載又稱非阻塞加載，瀏覽器在下載執(zhí)行
js的同時(shí)，還會(huì)繼續(xù)進(jìn)行后續(xù)頁(yè)面的處理。主要有三種方式
2.1 async、await
這個(gè)是
ES7中的特性，async顧名思義是“異步”的意思，async用于聲明一個(gè)函數(shù)是異步的。而await從字面意思上是“等待”的意思，就是用于等待異步完成詳細(xì)可以參考這篇文章大佬的文章
2.2 onload
把插入
script的方法放在一個(gè)函數(shù)里面，然后放在window.onload方法里面執(zhí)行，這樣就解決了阻塞onload事件觸發(fā)的問題
2.3 H5 async
當(dāng)瀏覽器解析到script腳本，沒有defer或async時(shí)，defer在延遲加載中會(huì)說到
<script src="main.js"></script>
瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，“立即”指在渲染該script標(biāo)簽之下的文檔元素之前，也就是說不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行
當(dāng)瀏覽器解析到script腳本，有async時(shí)
<script async src="main.js"></script>
瀏覽器會(huì)立即下載腳本，但不妨礙頁(yè)面中的其他操作，比如下載其他資源或等待加載其他腳本。加載和渲染后續(xù)文檔元素的過程和
main.js的加載與執(zhí)行并行進(jìn)行，這個(gè)過程是異步的
3 延遲加載
有些代碼在某種特定情況下才需要，并不是一股腦子都加載出來了，這個(gè)時(shí)候就需要延遲加載
這里也是
H5的內(nèi)容
3.1 H5 defer
當(dāng)瀏覽器解析到script腳本，有defer時(shí)
<script defer="defer" src="main1.js"></script>
<script defer="defer" src="main2.js"></script>
此時(shí)單純看這兩個(gè)需要被加載的
js文件和其他HTML的渲染，CSS的加載，圖片的加載等是同時(shí)進(jìn)行的，是異步操作但是單看
main1.js和main2.js又和同步的執(zhí)行是一樣的，當(dāng)加載main1.js的時(shí)候，main2.js會(huì)等待main1.js加載完畢再加載這就是
defer的作用了，當(dāng)有defer的時(shí)候，先架加載第一個(gè)延遲腳本
3.2 async VS defer
相同點(diǎn)：異步加載文件
不同點(diǎn)：
async：雖然是異步加載，但當(dāng)有多個(gè)腳本異步加載的時(shí)候，不一定先加載哪一個(gè)，加載順序不一定
defer：加載順序由第一個(gè)延遲腳本到最后一個(gè)延遲腳本
4 預(yù)加載
預(yù)加載是一種瀏覽器機(jī)制，使用瀏覽器空閑時(shí)間來預(yù)先下載/加載用戶接下來很可能會(huì)瀏覽的頁(yè)面/資源，當(dāng)用戶訪問某個(gè)預(yù)加載的鏈接時(shí)，如果從緩存命中,頁(yè)面就得以快速呈現(xiàn)
