HTML5 script元素async、defer異步加載使用介紹

2020-03-24 16:39:35

字體：大中小

供稿：網(wǎng)友

(譯者注: 異步加載,可以理解為無阻塞并發(fā)處理.)

我對于HTML5感到興奮不已的原因之一是它實(shí)現(xiàn)了眾多業(yè)界期待已久的特性。我們一直需要輸入框顯示空白提示，但都是用JavaScript來實(shí)現(xiàn)的。我們也想要整個(gè)塊都變成可被點(diǎn)擊，也是使用JavaScript來實(shí)現(xiàn)。
現(xiàn)在WebKit為HTML5實(shí)現(xiàn)了SCRIPT標(biāo)簽的async異步屬性。過去我們使用各種JavaScript技巧來做這種事情，但現(xiàn)在新的屬性讓防止阻塞變得相對容易。

async - HTML屬性
如我前面提到的，添加async屬性非常簡單：

復(fù)制代碼代碼如下:
!-- 指定async,以及 onload 回調(diào)--
script async src="siteScript.js" onload="myInit()" /script

事實(shí)上，如果你的JavaScript以及HTML結(jié)構(gòu)設(shè)計(jì)的合理，那么90%的情況下你的Script元素可以使用異步加載。

defer - HTML屬性
Safari 瀏覽器額外添加了defer屬性

復(fù)制代碼代碼如下:
!-- 指定defer,效果和async差不多--
script defer src="siteScript.js" onload="myInit()" /script

async 與 defer 的差別
WebKit官方博客很好地解釋了async 與 defer 的不同
------------------------------------
正常情況下，當(dāng)瀏覽器在解析HTML源文件時(shí)如果遇到外部的script，那么解析過程會(huì)暫停，并發(fā)送請求來下載script文件，只有script完全下載并執(zhí)行后才會(huì)繼續(xù)執(zhí)行DOM解析。比如：
script src= myBlockingScript.js /script
在下載過程中瀏覽器是被阻止做其他有用的工作的，包括解析HTML，執(zhí)行其他腳本，以及展示CSS布局。雖然Webkit預(yù)加載掃描程序可以探測性地在下載階段進(jìn)行多線程下載，但是某些頁面仍然存在很大的網(wǎng)絡(luò)延遲。
當(dāng)前有很多技術(shù)來提升頁面顯示速度,但都需要額外的代碼以及針對特定瀏覽器的技巧。現(xiàn)在，script可以通過添加async或者defer屬性來讓腳本不必同步執(zhí)行，示例如下：

復(fù)制代碼代碼如下:
script async src="myAsyncScript.js" onload="myInit()" /script
script defer src="myDeferScript.js" onload="myInit()" /script

async 和 defer 標(biāo)注的 script 都不會(huì)暫停HTML解析就立刻被下載,兩者都支持onload事件回調(diào)來解決需要該腳本來執(zhí)行的初始化。
兩者的區(qū)別在于執(zhí)行時(shí)的不同：
async 腳本在script文件下載完成后會(huì)立即執(zhí)行,并且其執(zhí)行時(shí)間一定在 window的load事件觸發(fā)之前。這意味著多個(gè)async腳本很可能不會(huì)按其在頁面中的出現(xiàn)次序順序執(zhí)行。
與此相對，瀏覽器確保多個(gè) defer 腳本按其在html' target='_blank'>HTML頁面中的出現(xiàn)順序依次執(zhí)行,且執(zhí)行時(shí)機(jī)為DOM解析完成后，document的DOMContentLoaded 事件觸發(fā)之前。

下面展示的是一個(gè)需要1秒來下載，以及1秒來解析執(zhí)行其他操作的例子，我們可以看到整個(gè)頁面載入花了大約2秒鐘。

同樣的例子，但這次我們指定了script的 defer 屬性.因?yàn)楫?dāng)defer腳本下載的時(shí)候，其他操作可以并行執(zhí)行，所以大概快了1倍。

------------------------------------
哪些瀏覽器支持async 和 defer
同樣是上面引用的文章中提到：

除了基于Webkit的新版本瀏覽器,FireFox已經(jīng)支持defer和onload屬性很長時(shí)間了，而且從FF3.6開始添加了async屬性。IE同樣支持defer屬性,但還不支持async屬性，從IE9開始，onload屬性也將被支持。

aynsc 棒極了！
看到webkit實(shí)現(xiàn)async我開心得合不攏嘴了。對每個(gè)網(wǎng)站來說，阻塞都是一個(gè)巨大的性能瓶頸，而可以直接指定script文件異步加載無疑會(huì)加快web頁面的速度.html教程

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

上一篇：關(guān)于html valign屬性的作用和使用方法詳解(附使用方法實(shí)例)

下一篇：html中當(dāng)上下文菜單被觸發(fā)時(shí)運(yùn)行腳本的oncontextmenu事件