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 相关文章推荐
CSS3 3D位移translate效果实例介绍
May 03 HTML / CSS
玩转CSS3色彩
Jan 16 HTML / CSS
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
CSS3实现大小不一的粒子旋转加载动画
Apr 21 HTML / CSS
css3media响应式布局实例
Jul 08 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
Apr 08 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 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如何利用P3P实现跨域
2013/08/24 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
JavaScript必知必会(七)js对象继承
2016/06/08 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
webpack组织模块打包Library的原理及实现
2018/03/10 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
python代码编写计算器小程序
2020/03/30 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
Python爬取某平台短视频的方法
2021/02/08 Python
优质的学校老师推荐信
2013/10/28 职场文书
电台编导求职信
2014/05/06 职场文书
冬季安全检查方案
2014/05/23 职场文书
施工安全汇报材料
2014/08/17 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
校长师德表现自我评价
2015/03/04 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
PHP命令行与定时任务
2021/04/01 PHP
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python