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)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 北京三友信电子科技有限公司-ETC高速自动栏杆机|ETC机柜|激光车辆轮廓测量仪|嵌入式车道控制器 | 雨燕360体育免费直播_雨燕360免费NBA直播_NBA篮球高清直播无插件-雨燕360体育直播 | 不锈钢水箱生产厂家_消防水箱生产厂家-河南联固供水设备有限公司 | 超细粉碎机|超微气流磨|气流分级机|粉体改性设备|超微粉碎设备-山东埃尔派粉碎机厂家 | 深圳市东信高科自动化设备有限公司 | 微波消解仪器_智能微波消解仪报价_高压微波消解仪厂家_那艾 | 煤棒机_增碳剂颗粒机_活性炭颗粒机_木炭粉成型机-巩义市老城振华机械厂 | 合肥网络推广_合肥SEO网站优化-安徽沃龙First | 睿婕轻钢别墅_钢结构别墅_厂家设计施工报价 | 金库门,金库房,金库门厂家,金库门价格-河北特旺柜业有限公司 | 交流伺服电机|直流伺服|伺服驱动器|伺服电机-深圳市华科星电气有限公司 | 水性绝缘漆_凡立水_绝缘漆树脂_环保绝缘漆-深圳维特利环保材料有限公司 | 今日娱乐圈——影视剧集_八卦娱乐_明星八卦_最新娱乐八卦新闻 | 无锡网站建设_小程序制作_网站设计公司_无锡网络公司_网站制作 | 硫化罐_蒸汽硫化罐_大型硫化罐-山东鑫泰鑫智能装备有限公司 | 铝合金脚手架厂家-专注高空作业平台-深圳腾达安全科技 | 天津试验仪器-电液伺服万能材料试验机,恒温恒湿标准养护箱,水泥恒应力压力试验机-天津鑫高伟业科技有限公司 | 视频教程导航网_视频教程之家_视频教程大全_最新视频教程分享发布平台 | 建筑资质代办-建筑企业资质代办机构-建筑资质代办公司 | 轴流风机-鼓风机-离心风机-散热风扇-罩极电机,生产厂家-首肯电子 | 哲力实业_专注汽车涂料汽车漆研发生产_汽车漆|修补油漆品牌厂家 长沙一级消防工程公司_智能化弱电_机电安装_亮化工程专业施工承包_湖南公共安全工程有限公司 | 假肢-假肢价格-假肢厂家-河南假肢-郑州市力康假肢矫形器有限公司 | 山西3A认证|太原AAA信用认证|投标AAA信用证书-山西AAA企业信用评级网 | 环氧铁红防锈漆_环氧漆_无溶剂环氧涂料_环氧防腐漆-华川涂料 | 神马影院-实时更新秒播| 钢格板|镀锌钢格板|热镀锌钢格板|格栅板|钢格板|钢格栅板|热浸锌钢格板|平台钢格板|镀锌钢格栅板|热镀锌钢格栅板|平台钢格栅板|不锈钢钢格栅板 - 专业钢格板厂家 | 磁力去毛刺机_去毛刺磁力抛光机_磁力光饰机_磁力滚抛机_精密金属零件去毛刺机厂家-冠古科技 | 手持式3d激光扫描仪-便携式三维立体扫描仪-北京福禄克斯 | 烟台游艇培训,威海游艇培训-烟台市邮轮游艇行业协会 | 商标转让-购买商标专业|放心的商标交易网-蜀易标商标网 | 山东led显示屏,山东led全彩显示屏,山东LED小间距屏,临沂全彩电子屏-山东亚泰视讯传媒有限公司 | 考勤系统_人事考勤管理系统_本地部署BS考勤系统_考勤软件_天时考勤管理专家 | 河南不锈钢水箱_地埋水箱_镀锌板水箱_消防水箱厂家-河南联固供水设备有限公司 | 水成膜泡沫灭火剂_氟蛋白泡沫液_河南新乡骏华消防科技厂家 | 乐考网-银行从业_基金从业资格考试_初级/中级会计报名时间_中级经济师 | 不锈钢拉手厂家|浴室门拉手厂家|江门市蓬江区金志翔五金制品有限公司 | 急救箱-应急箱-急救包厂家-北京红立方医疗设备有限公司 | 模温机-油温机-电加热导热油炉-工业冷水机「欧诺智能」 | 长沙网站建设制作「网站优化推广」-网页设计公司-速马科技官网 | 长沙广告公司|长沙广告制作设计|长沙led灯箱招牌制作找望城湖南锦蓝广告装饰工程有限公司 | 广东西屋电气有限公司-广东西屋电气有限公司|