浅析script标签中的defer与async属性


Posted in Javascript onNovember 30, 2016

一、前言

看到的前辈写的代码如下

<script src="#link("xxxx/xx/home/home.js")" type="text/javascript" async defer></script>

竟然同时有asyncdefer属性,心想着肯定是前辈老司机的什么黑科技,两个一块儿肯定会发生什么神奇化学反应,于是赶紧怀着一颗崇敬的心去翻书翻文档,先复习一下各自的定义。

二、调查一番

先看看asyncdefer各自的定义吧,翻开红宝书望远镜,是这么介绍的

2.1 defer

这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。因此,在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。

HTML5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded事件执行。在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoad时间触发前执行,因此最好只包含一个延迟脚本。

2.2 async

这个属性与defer类似,都用于改变处理脚本的行为。同样与defer类似,async只适用于外部脚本文件,并告诉浏览器立即下载文件。但与defer不同的是,标记为async的脚本并不保证按照它们的先后顺序执行。

第二个脚本文件可能会在第一个脚本文件之前执行。因此确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。

概括来讲,就是这两个属性都会使script标签异步加载,然而执行的时机是不一样的。引用segmentfault上的一个回答中的一张图

浅析script标签中的defer与async属性

蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。

也就是说async是乱序的,而defer是顺序执行,这也就决定了async比较适用于百度分析或者谷歌分析这类不依赖其他脚本的库。从图中可以看到一个普通的<script>标签的加载和解析都是同步的,会阻塞DOM的渲染,这也就是我们经常会把<script>写在<body>底部的原因之一,为了防止加载资源而导致的长时间的白屏,另一个原因是js可能会进行DOM操作,所以要在DOM全部渲染完后再执行。

2.3 really?

然而,这张图(几乎是百度搜到的唯一答案)是不严谨的,这只是规范的情况,大多数浏览器在实现的时候会作出优化。

来看看chrome是怎么做的

《WebKit技术内幕》:

      1、当用户输入网页URL的时候,WebKit调用其资源加载器加载该URL对应的网页。

      2、加载器依赖网络模块建立连接,发送请求并接受答复。

      3、WebKit接收到各种网页或者资源的数据,其中某些资源可能是同步或异步获取的。

      4、网页被交给HTML解释器转变成一系列的词语(Token)。

      5、解释器根据词语构建节点(Node),形成DOM树。

      6、如果节点是JavaScript代码的话,调用JavaScript引擎解释并执行。

      7、JavaScript代码可能会修改DOM树的结构。

      8、如果节点需要依赖其他资源,例如图片、CSS、视频等,调用资源加载器来加载他们,但是他们是异步的,不会阻碍当前DOM树的继续创建;如果是JavaScript资源URL(没有标记异步方式),则需要停止当前DOM树的创建,直到JavaScript的资源加载并被JavaScript引擎执行后才继续DOM树的创建。

所以,通俗来讲,chrome浏览器首先会请求HTML文档,然后对其中的各种资源调用相应的资源加载器进行异步网络请求,同时进行DOM渲染,直到遇到<script>标签的时候,主进程才会停止渲染等待此资源加载完毕然后调用V8引擎对js解析,继而继续进行DOM解析。我的理解如果加了async属性就相当于单独开了一个进程去独立加载和执行,而defer是和将<script>放到<body>底部一样的效果。

三、实验一发

3.1 demo

为了验证上面的结论我们来测试一下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
 <link href="http://cdn.staticfile.org/foundation/6.0.1/css/foundation.css" rel="stylesheet">
 <script src="http://lib.sinaapp.com/js/angular.js/angular-1.2.19/angular.js"></script>
 <script src="http://libs.baidu.com/backbone/0.9.2/backbone.js"></script>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
 ul>li{这是第$个节点}*1000
</body>
</html>

一个简单的demo,从各个CDN上引用了2个CSS3个JS,在body里面创建了1000个li。通过调整外部引用资源的位置和加入相关的属性利用chrome的Timeline进行验证。

3.2 放置在<head>内

浅析script标签中的defer与async属性

异步加载资源,但会阻塞<body>的渲染会出现白屏,按照顺序立即执行脚本

3.3 放置在<body>底部

浅析script标签中的defer与async属性

异步加载资源,等<body>中的内容渲染完毕后且加载完按顺序执行JS

3.3 放置在<head>头部并使用async

浅析script标签中的defer与async属性

异步加载资源,且加载完JS资源立即执行,并不会按顺序,谁快谁先上

3.4 放置在<head>头部并使用defer

浅析script标签中的defer与async属性

异步加载资源,在DOM渲染后之后再按顺序执行JS

3.5 放置在<head>头部并同时使用async和defer

浅析script标签中的defer与async属性

表现和async一致,开了个脑洞,把这两个属性交换一下位置,看会不会有覆盖效果,结果发现是一致的 = =、

综上,在webkit引擎下,建议的方式仍然是把<script>写在<body>底部,如果需要使用百度谷歌分析或者不蒜子等独立库时可以使用async属性,若你的<script>标签必须写在<head>头部内可以使用defer属性

四、 兼容性

那么,揣摩一下前辈的心理,同时写上的原因是什么呢,兼容性?

上caniuse,async在IE<=9时不支持,其他浏览器OK;defer在IE<=9时支持但会有bug,其他浏览器OK;现象在这个issue里有描述,这也就是“望远镜”里建议只有一个defer的原因。所以两个属性都指定是为了在async不支持的时候启用defer,但defer在某些情况下还是有bug。

The defer attribute may be specified even if the async attribute is specified, to cause legacy Web browsers that only support defer (and not async) to fall back to the defer behavior instead of the synchronous blocking behavior that is the default.

五、结论

其实这么讲来,最稳妥的办法还是把<script>写在<body>底部,没有兼容性问题,没有白屏问题,没有执行顺序问题,高枕无忧,不要搞什么deferasync的花啦~

目前只研究了chrome的webkit的渲染机制,Firefox和IE的有待继续研究,图片和CSS以及其他外部资源的渲染有待研究。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
csdn 批量接受好友邀请
Feb 19 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
angular实现商品筛选功能
Feb 01 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
node thread.sleep实现示例
Jun 20 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 #Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 #Javascript
html判断当前页面是否在iframe中的实例
Nov 30 #Javascript
vue.js实现表格合并示例代码
Nov 30 #Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 #Javascript
Javascript 闭包详解及实例代码
Nov 30 #Javascript
jQuery特殊符号转义的实现
Nov 30 #Javascript
You might like
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
YII路径的用法总结
2014/07/09 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
JS实现非首屏图片延迟加载的示例
2018/01/06 Javascript
jQuery实现的导航条点击后高亮显示功能示例
2019/03/04 jQuery
jQuery实现本地存储
2020/12/22 jQuery
[03:48]大碗DOTA
2019/07/25 DOTA
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
Python中bisect的用法及示例详解
2020/07/20 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
跑操口号
2014/06/12 职场文书
python geopandas读取、创建shapefile文件的方法
2021/06/29 Python
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS