HTML5 script元素async、defer异步加载使用介绍


Posted in HTML / CSS onAugust 23, 2013

(译者注: 异步加载,可以理解为无阻塞并发处理.)

我对于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秒钟。
HTML5 script元素async、defer异步加载使用介绍 
同样的例子,但这次我们指定了script的 defer 属性.因为当defer脚本下载的时候,其他操作可以并行执行,所以大概快了1倍。
HTML5 script元素async、defer异步加载使用介绍 
------------------------------------
哪些浏览器支持async 和 defer
同样是上面引用的文章中提到:

除了基于Webkit的新版本浏览器,FireFox已经支持defer和onload属性很长时间了,而且从FF3.6开始添加了async属性。IE同样支持defer属性,但还不支持async属性,从IE9开始,onload属性也将被支持。

aynsc 棒极了!
看到webkit实现async我开心得合不拢嘴了。对每个网站来说,阻塞都是一个巨大的性能瓶颈,而可以直接指定script文件异步加载无疑会加快web页面的速度.

HTML / CSS 相关文章推荐
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
html5-websocket基于远程方法调用的数据交互实现
Dec 04 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
如何利用input事件来监听移动端的输入
Apr 15 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
Aug 08 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
HTML利用九宫格原理进行网页布局
Mar 13 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
html5基础教程常用技巧整理
Aug 20 #HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 #HTML / CSS
用html5的canvas画布绘制贝塞尔曲线完整代码
Aug 14 #HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 #HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 #HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 #HTML / CSS
HTML5的语法变化介绍
Aug 13 #HTML / CSS
You might like
php自定义的格式化时间示例代码
2013/12/05 PHP
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
JQuery仿小米手机抢购页面倒计时效果
2014/12/16 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
2016/10/30 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
跟老齐学Python之编写类之三子类
2014/10/11 Python
python绘图方法实例入门
2015/05/19 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Python处理文本换行符实例代码
2018/02/03 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Python jieba库用法及实例解析
2019/11/04 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
下述程序的作用是计算机数组中的最大元素值及其下标
2012/11/26 面试题
计算机科学与技术应届生求职信
2013/11/07 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
励志演讲稿300字
2014/08/21 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
思想工作总结范文
2015/08/12 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
关于 Python json中load和loads区别
2021/11/07 Python