JS中script標(biāo)簽defer和async屬性的區(qū)別詳解
向html頁面中插入javascript代碼的主要方法就是通過script標(biāo)簽。其中包括兩種形式，第一種直接在script標(biāo)簽之間插入js代碼，第二種即是通過src屬性引入外部js文件。由于解釋器在解析執(zhí)行js代碼期間會阻塞頁面其余部分的渲染，對于存在大量js代碼的頁面來說會導(dǎo)致瀏覽器出現(xiàn)長時間的空白和延遲，為了避免這個問題，建議把全部的js引用放在</body>標(biāo)簽之前。
script標(biāo)簽存在兩個屬性，defer和async，因此script標(biāo)簽的使用分為三種情況：
1.<script src="example.js"></script>
沒有defer或async屬性，瀏覽器會立即加載并執(zhí)行相應(yīng)的腳本。也就是說在渲染script標(biāo)簽之后的文檔之前，不等待后續(xù)加載的文檔元素，讀到就開始加載和執(zhí)行，此舉會阻塞后續(xù)文檔的加載；
2.<script async src="example.js"></script>
有了async屬性，表示后續(xù)文檔的加載和渲染與js腳本的加載和執(zhí)行是并行進(jìn)行的，即異步執(zhí)行；
3.<script defer src="example.js"></script>
有了defer屬性，加載后續(xù)文檔的過程和js腳本的加載(此時僅加載不執(zhí)行)是并行進(jìn)行的(異步)，js腳本的執(zhí)行需要等到文檔所有元素解析完成之后，DOMContentLoaded事件觸發(fā)執(zhí)行之前。
下圖可以直觀的看出三者之間的區(qū)別:
其中藍(lán)色代表js腳本網(wǎng)絡(luò)加載時間，紅色代表js腳本執(zhí)行時間，綠色代表html解析。
從圖中我們可以明確一下幾點(diǎn)：
1.defer和async在網(wǎng)絡(luò)加載過程是一致的，都是異步執(zhí)行的；
2.兩者的區(qū)別在于腳本加載完成之后何時執(zhí)行，可以看出defer更符合大多數(shù)場景對應(yīng)用腳本加載和執(zhí)行的要求；
3.如果存在多個有defer屬性的腳本，那么它們是按照加載順序執(zhí)行腳本的；而對于async，它的加載和執(zhí)行是緊緊挨著的，無論聲明順序如何，只要加載完成就立刻執(zhí)行，它對于應(yīng)用腳本用處不大，因?yàn)樗耆豢紤]依賴。
小結(jié)：
defer 和 async 的共同點(diǎn)是都是可以并行加載JS文件，不會阻塞頁面的加載，不同點(diǎn)是 defer的加載完成之后，JS會等待整個頁面全部加載完成了再執(zhí)行，而async是加載完成之后，會馬上執(zhí)行JS，所以假如對JS的執(zhí)行有嚴(yán)格順序的話，那么建議用 defer加載。
以上所述是小編給大家介紹的JS中script標(biāo)簽defer和async屬性的區(qū)別詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
javascript獲取dom的下一個節(jié)點(diǎn)方法
這篇文章主要介紹了javascript獲取dom的下一個節(jié)點(diǎn)方法,實(shí)現(xiàn)在頁面點(diǎn)擊加減按鈕數(shù)字的累加，需要的朋友可以參考下2014-09-09
模塊化在項(xiàng)目中十分的重要，一個復(fù)雜的項(xiàng)目肯定有很多相似的功能模塊，如果每次都需要重新編寫模塊肯定既費(fèi)時又耗力。但是引用別人編寫模塊的前提是要有統(tǒng)一的“打開姿勢”，如果每個人有各自的寫法，那么肯定會亂套，下面介紹幾種JS的模塊化的規(guī)范。2017-03-03
這篇文章主要給大家介紹了關(guān)于微信小程序基礎(chǔ)教程之worker線程的使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
基于Turn.js 實(shí)現(xiàn)翻書效果實(shí)例解析
最近項(xiàng)目經(jīng)理我個項(xiàng)目練練手，其項(xiàng)目需求是要實(shí)現(xiàn)翻書效果，看到這個需求后，我真是懵了，這咋整，我可是java出身的啊，這個問題真是難住我了，后來有同事的指導(dǎo)，問題順利解決，下面小編把學(xué)習(xí)心得分享，感興趣的朋友可以參考下2016-06-06
JavaScript禁止復(fù)制與粘貼的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄狫avaScript禁止復(fù)制與粘貼的實(shí)現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-05-05
JavaScript結(jié)合Canvas繪畫畫運(yùn)動小球
這篇文章主要介紹了JavaScript結(jié)合Canvas畫運(yùn)動小球，canvas被稱為畫布，可以結(jié)合javascript實(shí)現(xiàn)繪制各種圖形,制作各種炫酷的動畫效果，下面文章更多詳細(xì)內(nèi)容介紹需要的小伙伴可以參考一下2022-03-03
reduce()方法對數(shù)組中的每個元素按序執(zhí)行一個提供的reducer函數(shù),每一次運(yùn)行 reducer會將先前元素的計算結(jié)果作為參數(shù)傳入,最后將其結(jié)果匯總為單個返回值,今天我們就介紹一下reduce的幾種簡單使用場景,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)移動端輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
JS實(shí)現(xiàn)漂亮的窗口拖拽效果(可改變大小、最大化、最小化、關(guān)閉)
這篇文章主要介紹了JS實(shí)現(xiàn)漂亮的窗口拖拽效果,具有可改變大小、最大化、最小化、關(guān)閉等功能,以完整實(shí)例形式較為詳細(xì)的分析了JavaScript操作窗口的大小改變、還原及關(guān)閉等功能的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了詳解微信小程序之提高應(yīng)用速度小技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01