淺談HTML5 defer和async的區(qū)別

2020-03-24 16:20:45

字體：大中小

供稿：網(wǎng)友

在html' target='_blank'>HTML頁(yè)面中插入Javascript的主要方法，就是使用 script 元素。這個(gè)元素由Netscape創(chuàng)造并在Netscape Navigator 2中首先實(shí)現(xiàn)。后來(lái)，這個(gè)元素就被加入到正式的HTML規(guī)范中。HTML4.01為 script 定義了6個(gè)屬性，包括defer和async。defer和async都是可選的，且只對(duì)外部腳本文件有效。

一、當(dāng)瀏覽器解析到script腳本，沒(méi)有defer或async時(shí)：

script src= main.js /script 瀏覽器會(huì)立即加載并執(zhí)行指定的腳本，立即指在渲染該script標(biāo)簽之下的文檔元素之前，也就是說(shuō)不等待后續(xù)載入的文檔元素，讀到就加載并執(zhí)行。

二、當(dāng)瀏覽器解析到script腳本，有async時(shí)：

script async src= main.js /script 瀏覽器會(huì)立即下載腳本，但不妨礙頁(yè)面中的其他操作，比如下載其他資源或等待加載其他腳本。加載和渲染后續(xù)文檔元素的過(guò)程和main.js的加載與執(zhí)行并行進(jìn)行（異步）。

async不保證按照腳本出現(xiàn)的先后順序執(zhí)行，因此，確保兩者之前互不依賴非常重要，指定async屬性的目的是不讓頁(yè)面等待兩個(gè)腳本的下載和執(zhí)行，從而異步加載頁(yè)面其他內(nèi)容，建議異步腳本不要在加載期間修改DOM。

異步腳本一定會(huì)在頁(yè)面的load事件前執(zhí)行，但可能會(huì)在DOMContentLoaded事件觸發(fā)之前或之后執(zhí)行。支持異步腳本的瀏覽器有Firefox 3.6、Safari 5 和Chrome。

三、當(dāng)瀏覽器解析到script腳本，有defer時(shí)：

script defer= defer src= main1.js /script
script defer= defer src= main2.js /script 表示腳本會(huì)被延遲到文檔完全被解析和顯示之后再執(zhí)行，加載后續(xù)文檔元素的過(guò)程將和main.js的加載并行進(jìn)行（異步）。HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行，因此第一個(gè)延遲腳本會(huì)先于第二個(gè)延遲腳本執(zhí)行，而這兩個(gè)腳本會(huì)先于DOMContentLoaded事件。在現(xiàn)實(shí)當(dāng)中，延遲腳本并不一定會(huì)按照順序執(zhí)行，也不一定會(huì)在DOMContentLoaded事件觸發(fā)前執(zhí)行，因此最好只包含一個(gè)延遲腳本。

IE4~IE7還支持對(duì)嵌入腳本的defer屬性，但I(xiàn)E8以及之后的版本則完全支持HTML5規(guī)定的行為。

IE4，F(xiàn)irefox 3.5，Safari 5和Chrome是最早支持defer屬性的瀏覽器。其他瀏覽器胡忽略這個(gè)屬性，像平常一樣處理腳本，為此，把延遲腳本放在頁(yè)面底部仍然是最佳選擇。

藍(lán)色線代表網(wǎng)絡(luò)讀取，紅色線代表執(zhí)行時(shí)間，這倆都是針對(duì)腳本的；綠色線代表 HTML 解析。

此圖告訴我們以下幾個(gè)要點(diǎn)：

defer 和 async 在網(wǎng)絡(luò)讀?。ㄏ螺d）這塊兒是一樣的，都是異步的（相較于 HTML 解析）它倆的差別在于腳本下載完之后何時(shí)執(zhí)行，顯然 defer 是最接近我們對(duì)于應(yīng)用腳本加載和執(zhí)行的要求的關(guān)于 defer，此圖未盡之處在于它是按照加載順序執(zhí)行腳本的，這一點(diǎn)要善加利用async 則是一個(gè)亂序執(zhí)行的主，反正對(duì)它來(lái)說(shuō)腳本的加載和執(zhí)行是緊緊挨著的，所以不管你聲明的順序如何，只要它加載完了就會(huì)立刻執(zhí)行仔細(xì)想想，async 對(duì)于應(yīng)用腳本的用處不大，因?yàn)樗耆豢紤]依賴（哪怕是最低級(jí)的順序執(zhí)行），不過(guò)它對(duì)于那些可以不依賴任何腳本或不被任何腳本依賴的腳本來(lái)說(shuō)卻是非常合適的，最典型的例子：Google Analytics以上這篇淺談HTML5 defer和async的區(qū)別就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持phpstudy。原文地址：http://www.cnblogs.com/shouce/archive/2016/06/07/5565898.htmlhtml教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：HTML5中canvas與SVG有什么區(qū)別

下一篇：html button標(biāo)簽怎么使用？html button標(biāo)簽有什么作用？