pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

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

我對于HTML5感到興奮不已的原因之一是它實現(xiàn)了眾多業(yè)界期待已久的特性。我們一直需要輸入框顯示空白提示,但都是用JavaScript來實現(xiàn)的。我們也想要整個塊都變成可被點擊,也是使用JavaScript來實現(xiàn)。
現(xiàn)在WebKit為HTML5實現(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>


事實上,如果你的JavaScript以及HTML結(jié)構(gòu)設(shè)計的合理,那么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源文件時如果遇到外部的script,那么解析過程會暫停,并發(fā)送請求來下載script文件,只有script完全下載并執(zhí)行后才會繼續(xù)執(zhí)行DOM解析。比如:
<script src="myBlockingScript.js"></script>
在下載過程中瀏覽器是被阻止做其他有用的工作的,包括 解析HTML,執(zhí)行其他腳本,以及展示CSS布局。雖然Webkit預(yù)加載掃描程序可以探測性地在下載階段進行多線程下載,但是某些頁面仍然存在很大的網(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 都不會暫停HTML解析就立刻被下載,兩者都支持onload事件回調(diào)來解決需要該腳本來執(zhí)行的初始化。
兩者的區(qū)別在于執(zhí)行時的不同:
async 腳本在script文件下載完成后會立即執(zhí)行,并且其執(zhí)行時間一定在 window的load事件觸發(fā)之前。這意味著多個async腳本很可能不會按其在頁面中的出現(xiàn)次序順序執(zhí)行。
與此相對,瀏覽器確保多個 defer 腳本按其在HTML頁面中的出現(xiàn)順序依次執(zhí)行,且執(zhí)行時機為DOM解析完成后,document的DOMContentLoaded 事件觸發(fā)之前。

下面展示的是一個需要1秒來下載,以及1秒來解析執(zhí)行其他操作的例子,我們可以看到整個頁面載入花了大約2秒鐘。
HTML5 script元素async、defer異步加載使用介紹 三聯(lián) 
同樣的例子,但這次我們指定了script的 defer 屬性.因為當(dāng)defer腳本下載的時候,其他操作可以并行執(zhí)行,所以大概快了1倍。
 
------------------------------------
哪些瀏覽器支持async 和 defer
同樣是上面引用的文章中提到:

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

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

【網(wǎng)站聲明】本站除付費源碼經(jīng)過測試外,其他素材未做測試,不保證完整性,網(wǎng)站上部分源碼僅限學(xué)習(xí)交流,請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ:2655101040 給予處理,謝謝支持。

相關(guān)文檔推薦

這篇文章主要介紹了有關(guān)HTML5頁面在iPhoneX適配問題,需要的朋友可以參考下
本篇文章主要介紹了html5中canvas圖表實現(xiàn)柱狀圖的示例,本文使用canvas來實現(xiàn)一個圖表,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
Adobe公司出品的多媒體處理軟件產(chǎn)品線較多,涵蓋了音視頻編輯、圖像處理、平面設(shè)計、影視后期等領(lǐng)域。這篇文章主要介紹了Adobe Html5 Extension開發(fā)初體驗圖文教程,非常不錯,需要的朋
這篇文章主要介紹了基于HTML5的WebGL經(jīng)典3D虛擬機房漫游動畫,需要的朋友可以參考下
這篇文章主要介紹了手機端用rem+scss做適配的詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
本篇文章主要介紹了canvas 實現(xiàn) github404動態(tài)效果的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 郑州爱婴幼师学校_专业幼师培训_托育师培训_幼儿教育培训学校 | 压接机|高精度压接机|手动压接机|昆明可耐特科技有限公司[官网] 胶泥瓷砖胶,轻质粉刷石膏,嵌缝石膏厂家,腻子粉批发,永康家德兴,永康市家德兴建材厂 | 山东螺杆空压机,烟台空压机,烟台开山空压机-烟台开山机电设备有限公司 | 爆炸冲击传感器-无线遥测传感器-航天星百科 | 双效节能浓缩器-热回流提取浓缩机组-温州市利宏机械 | 成都租车_成都租车公司_成都租车网_众行宝 | 厦门网站建设_厦门网站设计_小程序开发_网站制作公司【麦格科技】 | 合肥抖音SEO网站优化-网站建设-网络推广营销公司-百度爱采购-安徽企匠科技 | 展厅设计公司,展厅公司,展厅设计,展厅施工,展厅装修,企业展厅,展馆设计公司-深圳广州展厅设计公司 | b2b网站大全,b2b网站排名,找b2b网站就上地球网 | 杭州月嫂技术培训服务公司-催乳师培训中心报名费用-产后康复师培训机构-杭州优贝姆健康管理有限公司 | 不锈钢轴流风机,不锈钢电机-许昌光维防爆电机有限公司(原许昌光维特种电机技术有限公司) | 集装箱展厅-住人集装箱住宿|建筑|房屋|集装箱售楼处-山东锐嘉科技工程有限公司 | 双相钢_双相不锈钢_双相钢圆钢棒_双相不锈钢报价「海新双相钢」 双能x射线骨密度检测仪_dxa骨密度仪_双能x线骨密度仪_品牌厂家【品源医疗】 | 双菱电缆-广州电缆厂_广州电缆厂有限公司 | 强效碱性清洗剂-实验室中性清洗剂-食品级高纯氮气发生器-上海润榕科学器材有限公司 | 润东方环保空调,冷风机,厂房车间降温设备-20年深圳环保空调生产厂家 | 私人别墅家庭影院系统_家庭影院音响_家庭影院装修设计公司-邦牛影音 | 精准猎取科技资讯,高效阅读科技新闻_科技猎 | 洛阳防爆合格证办理-洛阳防爆认证机构-洛阳申请国家防爆合格证-洛阳本安防爆认证代办-洛阳沪南抚防爆电气技术服务有限公司 | 衬氟旋塞阀-卡套旋塞阀-中升阀门首页 | 密集架|电动密集架|移动密集架|黑龙江档案密集架-大量现货厂家销售 | 集装袋吨袋生产厂家-噸袋廠傢-塑料编织袋-纸塑复合袋-二手吨袋-太空袋-曹县建烨包装 | 蒸汽热收缩机_蒸汽发生器_塑封机_包膜机_封切收缩机_热收缩包装机_真空机_全自动打包机_捆扎机_封箱机-东莞市中堡智能科技有限公司 | 镀锌方管,无缝方管,伸缩套管,方矩管_山东重鑫致胜金属制品有限公司 | 自动螺旋上料机厂家价格-斗式提升机定制-螺杆绞龙输送机-杰凯上料机 | 气动机械手-搬运机械手-气动助力机械手-山东精瑞自动化设备有限公司 | 金刚网,金刚网窗纱,不锈钢网,金刚网厂家- 河北萨邦丝网制品有限公司 | 威海防火彩钢板,威海岩棉复合板,威海彩钢瓦-文登区九龙岩棉复合板厂 | 工业CT-无锡璟能智能仪器有限公司| 液压升降平台_剪叉式液压/导轨式升降机_传菜机定做「宁波日腾升降机厂家」 | 步进_伺服_行星减速机,微型直流电机,大功率直流电机-淄博冠意传动机械 | 皮带式输送机械|链板式输送机|不锈钢输送机|网带输送机械设备——青岛鸿儒机械有限公司 | 农业四情_农业气象站_田间小型气象站_智慧农业气象站-山东风途物联网 | 新车测评网_网罗汽车评测资讯_汽车评测门户报道| 电磁流量计_智能防腐防爆管道式计量表-金湖凯铭仪表有限公司 | 光纤测温-荧光光纤测温系统-福州华光天锐光电科技有限公司 | elisa试剂盒-PCR试剂盒「上海谷研实业有限公司」 | 博博会2021_中国博物馆及相关产品与技术博览会【博博会】 | 时代北利离心机,实验室离心机,医用离心机,低速离心机DT5-2,美国SKC采样泵-上海京工实业有限公司 工业电炉,台车式电炉_厂家-淄博申华工业电炉有限公司 | 焊锡丝|焊锡条|无铅锡条|无铅锡丝|无铅焊锡线|低温锡膏-深圳市川崎锡业科技有限公司 |