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

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

HTML5 script元素async、defer異步加載使用介紹_html5教程技巧HTML5中文學習網,是中國最大的HTML5中文門戶,為廣大HTML5愛好者提供各種HTML5資料,包括HTML5網站、HTML5資訊、HTML5應用、HTML5游戲、
點評:異步加載,可以理解為無阻塞并發處理,過去我們使用各種JavaScript技巧來做這種事情,現在WebKit為HTML5實現了SCRIPT標簽的async異步屬性,感興趣的朋友可以了解下
(譯者注: 異步加載,可以理解為無阻塞并發處理.)

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

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

復制代碼
代碼如下:

<!-- 指定async,以及 onload 回調-->
<script async src="siteScript.js" onload="myInit()"></script>

事實上,如果你的JavaScript以及HTML結構設計的合理,那么90%的情況下你的Script元素可以使用異步加載。

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

復制代碼
代碼如下:

<!-- 指定defer,效果和async差不多-->
<script defer src="siteScript.js" onload="myInit()"></script>

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

復制代碼
代碼如下:

<script async src="myAsyncScript.js" onload="myInit()"></script>
<script defer src="myDeferScript.js" onload="myInit()"></script>

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頁面的速度.
【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

這篇文章主要介紹了有關HTML5頁面在iPhoneX適配問題,需要的朋友可以參考下
本篇文章主要介紹了html5中canvas圖表實現柱狀圖的示例,本文使用canvas來實現一個圖表,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
Adobe公司出品的多媒體處理軟件產品線較多,涵蓋了音視頻編輯、圖像處理、平面設計、影視后期等領域。這篇文章主要介紹了Adobe Html5 Extension開發初體驗圖文教程,非常不錯,需要的朋
這篇文章主要介紹了基于HTML5的WebGL經典3D虛擬機房漫游動畫,需要的朋友可以參考下
這篇文章主要介紹了html5實現移動端適配完美寫法,需要的朋友可以參考下
本篇文章主要介紹了HTML5響應式(自適應)網頁設計的實現,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
主站蜘蛛池模板: 防爆电机生产厂家,YBK3电动机,YBX3系列防爆电机,YBX4节防爆电机--河南省南洋防爆电机有限公司 | 打孔器,打孔钳厂家【温州新星德牌五金工具】 | 定量包装机,颗粒定量包装机,粉剂定量包装机,背封颗粒包装机,定量灌装机-上海铸衡电子科技有限公司 | 上海皓越真空设备有限公司官网-真空炉-真空热压烧结炉-sps放电等离子烧结炉 | 福州仿石漆加盟_福建仿石漆厂家-外墙仿石漆加盟推荐铁壁金钢(福建)新材料科技有限公司有保障 | 广州冷却塔维修厂家_冷却塔修理_凉水塔风机电机填料抢修-广东康明节能空调有限公司 | 意大利Frascold/富士豪压缩机_富士豪半封闭压缩机_富士豪活塞压缩机_富士豪螺杆压缩机 | 四探针电阻率测试仪-振实密度仪-粉末流动性测定仪-宁波瑞柯微智能 | 谈股票-今日股票行情走势分析-牛股推荐排行榜 | QQ房产导航-免费收录优秀房地产网站_房地产信息网 | 东亚液氮罐-液氮生物容器-乐山市东亚机电工贸有限公司 | 尊享蟹太太美味,大闸蟹礼卡|礼券|礼盒在线预订-蟹太太官网 | 防勒索软件_数据防泄密_Trellix(原McAfee)核心代理商_Trellix(原Fireeye)售后-广州文智信息科技有限公司 | 小型数控车床-数控车床厂家-双头数控车床 | 北京银联移动POS机办理_收银POS机_智能pos机_刷卡机_收银系统_个人POS机-谷骐科技【官网】 | 偏心半球阀-电动偏心半球阀-调流调压阀-旋球阀-上欧阀门有限公司 | 计算机毕业设计源码网| 地埋式垃圾站厂家【佳星环保】小区压缩垃圾中转站转运站 | 卫生纸复卷机|抽纸机|卫生纸加工设备|做卫生纸机器|小型卫生纸加工需要什么设备|卫生纸机器设备多少钱一台|许昌恒源纸品机械有限公司 | 扒渣机,铁水扒渣机,钢水扒渣机,铁水捞渣机,钢水捞渣机-烟台盛利达工程技术有限公司 | (中山|佛山|江门)环氧地坪漆,停车场地板漆,车库地板漆,聚氨酯地板漆-中山永旺地坪漆厂家 | 希望影视-高清影视vip热播电影电视剧免费在线抢先看 | 德国BOSCH电磁阀-德国HERION电磁阀-JOUCOMATIC电磁阀|乾拓百科 | [官网]叛逆孩子管教_戒网瘾学校_全封闭问题青少年素质教育_新起点青少年特训学校 | 背压阀|减压器|不锈钢减压器|减压阀|卫生级背压阀|单向阀|背压阀厂家-上海沃原自控阀门有限公司 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 冷水机-冰水机-冷冻机-冷风机-本森智能装备(深圳)有限公司 | 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | 济南品牌包装设计公司_济南VI标志设计公司_山东锐尚文化传播 | 江苏齐宝进出口贸易有限公司| 氮化镓芯片-碳化硅二极管 - 华燊泰半导体 | 低温柔性试验仪-土工布淤堵-沥青车辙试验仪-莱博特(天津)试验机有限公司 | 山东PE给水管厂家,山东双壁波纹管,山东钢带增强波纹管,山东PE穿线管,山东PE农田灌溉管,山东MPP电力保护套管-山东德诺塑业有限公司 | led全彩屏-室内|学校|展厅|p3|户外|会议室|圆柱|p2.5LED显示屏-LED显示屏价格-LED互动地砖屏_蕙宇屏科技 | 细沙回收机-尾矿干排脱水筛设备-泥石分离机-建筑垃圾分拣机厂家-青州冠诚重工机械有限公司 | 高低温万能试验机_拉力试验机_拉伸试验机-馥勒仪器科技(上海)有限公司 | 骨密度检测仪_骨密度分析仪_骨密度仪_动脉硬化检测仪专业生产厂家【品源医疗】 | 对夹式止回阀厂家,温州对夹式止回阀制造商--永嘉县润丰阀门有限公司 | 至顶网| 阻燃剂-氢氧化镁-氢氧化铝-沥青阻燃剂-合肥皖燃新材料 | 动物解剖台-成蚊接触筒-标本工具箱-负压实验台-北京哲成科技有限公司 | 尼龙PA610树脂,尼龙PA612树脂,尼龙PA1010树脂,透明尼龙-谷骐科技【官网】 |