关于Javascript中defer和async的区别总结


Posted in Javascript onSeptember 20, 2016

首先来看看这三句话:

<script src="script.js"></script>

没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

<script async src="script.js"></script>

有 async,加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行(异步)。

<script defer src="myscript.js"></script>

有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

下面来进行详解的介绍这二者的区别。

一般情况

按照惯例,所有script元素都应该放在页面的head元素中。这种做法的目的就是把所有外部文件(CSS文件和JavaScript文件)的引用都放在相同的地方。可是,在文档的head元素中包含所有JavaScript文件,意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到body标签时才开始呈现内容)。

对于那些需要很多JavaScript代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题,现在Web应用程序一般都全部JavaScript引用放在body元素中页面的内容后面。这样一来,在解析包含的JavaScript代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title></title>
</head>
<body>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

defer (延迟脚本)

延迟脚本:defer属性只适用于外部脚本文件。

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

示例:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>延迟加载</title>
 <script defer type="text/javascript" src="test.js"></script>
</head>
<body>
</body>
</html>

这个例子中,虽然我们把script元素放在了文档的head元素中,但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行
HTML5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded事件(在DOM树构建完成后触发,不需要等到所有的资源都加载完毕)执行。

特别注意:在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本。

有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是 script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。

最佳实践

从实用角度来说,把所有脚本都放在 </body> 之前是最佳实践,因为对于旧浏览器来说这是唯一的优化选择,此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

**注意:**defer属性在浏览器之间表现并不一致。为了避免跨浏览器的差异,可以使用 “lazy loading”的方法,即直到用到该脚本时才加载。

function lazyload() {
 var elem = document.createElement("script");
 elem.type = "text/javascript";
 elem.async = true;
 elem.src = "script.js"; 
 document.body.appendChild(elem);
}

if (window.addEventListener) {
 window.addEventListener("load", lazyload, false);
} else if (window.attachEvent) {
 window.attachEvent("onload", lazyload);
} else {
 window.onload = lazyload;
}

async(异步脚本)

异步脚本:async属性也只适用于外部脚本文件,并告诉浏览器立即下载文件。

但与defer不同的是:标记为async的脚本并不保证按照指定它们的先后顺序执行。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>异步加载</title>
 <script async type="text/javascript" src="test1.js"></script>
 <script async type="text/javascript" src="test2.js"></script>
</head>
<body>
</body>
</html>

这个例子中,test2.js可能会在test1.js之前执行。因此,确保两者之间互不一来非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。因此,建议异步脚本不要在加载期间修改DOM。

来看一张更加清晰的图:

关于Javascript中defer和async的区别总结

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

通过上图和之前的分析,我们可以得出:

      1、defer 和 async 在网络读取(脚本下载)这块儿是一样的,都是异步的(相较于 HTML 解析)

      2、两者的差别:在于脚本下载完之后何时执行,显然 defer 是最接近我们对于应用脚本加载和执行的要求的。defer是立即下载但延迟执行,加载后续文档元素的过程将和脚本的加载并行进行(异步),但是脚本的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。async是立即下载并执行,加载和渲染后续文档元素的过程将和js脚本的加载与执行并行进行(异步)。

      3、关于 defer,我们还要记住的是它是按照加载顺序执行脚本的

      4、标记为async的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的,所以不管你声明的顺序如何,只要它加载完了就会立刻执行。

      5、async 对于应用脚本的用处不大,因为它完全不考虑依赖(哪怕是最低级的顺序执行),不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的。

总结

以上就是关于js中defer和async区别的全部内容,文章介绍的很详细,希望能对大家的学习或者工作带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
使用jQuery处理AJAX请求的基础学习教程
May 10 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
JavaScript实现简单的树形菜单效果
Jun 23 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
Sep 20 #Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 #Javascript
JQuery手速测试小游戏实现思路详解
Sep 20 #Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 #Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 #Javascript
javascript cookie用法基础教程(概念,设置,读取及删除)
Sep 20 #Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 #Javascript
You might like
php多个文件及图片上传实例详解
2014/11/10 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
javascript比较文档位置
2008/04/08 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
node.js实现端口转发
2016/04/14 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
Angular项目中$scope.$apply()方法的使用详解
2017/07/26 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
python中from module import * 的一个坑
2014/07/20 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
预订从美国飞往印度的机票:MyTicketsToIndia
2017/05/19 全球购物
自我介绍演讲稿
2014/01/15 职场文书
求职毕业生自荐书
2014/02/08 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
学生安全责任协议书
2016/03/22 职场文书
python - timeit 时间模块
2021/04/06 Python
nginx之内存池的实现
2022/06/28 Servers
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL