关于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 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
关于document.cookie的使用javascript
Oct 29 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
微信小程序 页面跳转及数据传递详解
Mar 14 Javascript
js中作用域的实例解析
Mar 16 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 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 IPV6正则表达式验证代码
2010/02/16 PHP
php获取QQ头像并显示的方法
2014/12/23 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
使用firebug进行调试javascript的示例
2013/12/16 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Swift中的协议(protocol)学习教程
2016/07/08 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
Python实现的矩阵类实例
2017/08/22 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
统计员岗位职责
2013/11/14 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
国培教师自我鉴定
2014/02/12 职场文书
文明风采获奖感言
2014/02/18 职场文书
餐厅销售主管职责范本
2014/02/19 职场文书
五一放假通知怎么写
2015/08/18 职场文书
化工生产实习心得体会
2016/01/22 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python