首頁 > web前端 > H5教程 > HTML5 script元素async、defer非同步載入使用介紹_html5教學技巧

HTML5 script元素async、defer非同步載入使用介紹_html5教學技巧

WBOY
發布: 2016-05-16 15:48:52
原創
1707 人瀏覽過

(譯者註: 非同步載入,可以理解為無阻塞並發處理.)

我對於HTML5感到興奮不已的原因之一是它實現了眾多業界期待已久的特性。我們一直需要輸入框顯示空白提示,但都是用JavaScript來實現的。我們也想要整個區塊都變成可以點擊,也是使用JavaScript來實作。
現在WebKit為HTML5實作了SCRIPT標籤的async非同步屬性。過去我們使用各種JavaScript技巧來做這種事情,但現在新的屬性讓防止阻塞變得相對容易。

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






複製程式碼
程式碼如下:


事實上,如果你的JavaScript以及HTML結構設計的合理,那麼90%的情況下你的Script元素可以使用非同步載入。
defer - HTML屬性
Safari 瀏覽器額外增加了defer屬性




複製程式碼

程式碼如下:




async 與defer 的差別WebKit官方部落格很好地解釋了async 與defer 的不同---------- -------------------------- 正常情況下,當瀏覽器在解析HTML來源檔案時如果遇到外部的script,那麼解析過程會暫停,並發送請求來下載script文件,只有script完全下載並執行後才會繼續執行DOM解析。例如:
在下載過程中瀏覽器是被阻止做其他有用的工作的,包括解析HTML,執行其他腳本,以及展示CSS佈局。雖然Webkit預先載入掃描程式可以偵測性地在下載階段進行多執行緒下載,但某些頁面仍然存在很大的網路延遲。
目前有很多技術來提升頁面顯示速度,但都需要額外的程式碼以及針對特定瀏覽器的技巧。現在,script可以透過加入async或defer屬性來讓腳本不必同步執行,範例如下:




複製程式碼


程式碼如下:




async 和defer 標註的script 都不會暫停HTML解析就立刻被下載,兩者都支持onload事件回調來解決需要該腳本來執行的初始化。
兩者的差異在於執行時的不同:
async 腳本在script文件下載完成後會立即執行,並且其執行時間一定在 window的load事件觸發之前。這意味著多個async腳本很可能不會按其在頁面中的出現順序執行。
與此相對,瀏覽器確保多個 defer 腳本按其在HTML頁面中的出現順序依次執行,且執行時機為DOM解析完成後,document的DOMContentLoaded 事件觸發之前。

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

 
同樣的例子,但這次我們指定了script的 defer 屬性.因為當defer腳本下載的時候,其他操作可以並行執行,所以大概快了1倍。  ------------------------------------ 哪些瀏覽器支援async 和defer 同樣是上面引用的文章中提到: 除了基於Webkit的新版本瀏覽器,FireFox已經支援defer和onload屬性很久了,而且從FF3.6開始新增了async屬性。 IE同樣支援defer屬性,但還不支援async屬性,從IE9開始,onload屬性也將被支援。 aynsc 棒極了! 看到webkit實現async我開心得合不攏嘴了。對每個網站來說,阻塞都是一個巨大的性能瓶頸,而可以直接指定script文件異步加載無疑會加快web頁面的速度.
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板