JavaScript的同步加載和異步加載[web前端培訓(xùn)]

在引入JavaScript腳本代碼時(shí)，頁(yè)面的下載和渲染都會(huì)暫停，等待腳本執(zhí)行完成后才會(huì)繼續(xù)，這種加載方式稱(chēng)為“同步加載”。“同步加載”也稱(chēng)“阻塞模式"，它是JavaScript腳本代碼默認(rèn)的加載方式，之所以要同步加載，是因?yàn)镴avaScript中可能有輸出、修改等行為，所以默認(rèn)同步執(zhí)行才是安全的怛是“同步加載”也有弊端。同步加載完畢之前，頁(yè)面內(nèi)容是無(wú)法正常顯示的，這就給網(wǎng)站訪問(wèn)者帶來(lái)不好的用戶(hù)體驗(yàn)。因此在代碼加栽過(guò)程中，我們需要讓那些負(fù)頁(yè)面內(nèi)結(jié)構(gòu)、樣式的代碼先加載，給用戶(hù)呈現(xiàn)一個(gè)美觀的界面效果，然后再加后續(xù)的腳本代碼，這時(shí)就需要用到“異步加載”。“異步加載”也稱(chēng)“非阻塞模式”，用于降JavaScript阻塞問(wèn)題對(duì)頁(yè)面造成的影響，使用<script>標(biāo)記屬性async和defer都可以設(shè)置 “異步加載”。下面將介紹這兩種屬性的使用方法。


 
1、async添加async屬性后，頁(yè)面會(huì)先下載腳本文件，不阻塞結(jié)構(gòu)代碼、樣式代碼的執(zhí)行，當(dāng)腳本文件下載完成后再執(zhí)行該腳本文件，示例代碼如下:

                  
<script src=http://js.test/file.js” async></script>


2、defer添加defer屬性后，頁(yè)面會(huì)先下載腳本文件，不阻塞結(jié)構(gòu)代碼、樣式代碼的執(zhí)行，當(dāng)頁(yè)面效果加載完成之后，再執(zhí)行腳本代碼，示例代碼如下:

<script src=http://js.test/file.js” defer></script>

 
值得一提的是，雖然async和defer都用于設(shè)置異步加載，但二者在腳本代碼下載完之后的執(zhí)行方式有很大差別。添加async屬性，當(dāng)腳本代碼下載完成之后會(huì)立即執(zhí)行腳本代碼;添加defer屬性，會(huì)等頁(yè)面效果加載完成之后再加載腳本代碼。

以上我們介紹了，JavaScript的同步加載和異步加載方式，希望對(duì)您有所幫助，如果想系統(tǒng)學(xué)習(xí)web前端知識(shí)提升職場(chǎng)競(jìng)爭(zhēng)力，請(qǐng)點(diǎn)擊頁(yè)面咨詢(xún)按鈕了解傳智播客web前端培訓(xùn)課程。