关于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 学习笔记(一)
Oct 13 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
jquery选择器使用详解
Apr 08 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
js实现移动端轮播图滑动切换
Dec 21 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
Thinkphp5行为使用方法汇总
2017/12/21 PHP
thinkPHP5使用Rabc实现权限管理
2019/08/28 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
2017/02/15 Javascript
js实现图片上传预览原理分析
2017/07/13 Javascript
vue实现留言板todolist功能
2017/08/16 Javascript
深入研究React中setState源码
2017/11/17 Javascript
微信小程序实现富文本图片宽度自适应的方法
2019/01/20 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
python实现简单的TCP代理服务器
2014/10/08 Python
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
《听鱼说话》教学反思
2014/02/15 职场文书
校园绿化美化方案
2014/06/08 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
运动会运动员赞词
2015/07/22 职场文书
小学入学感言
2015/08/01 职场文书
Django如何与Ajax交互
2021/04/29 Python
html5调用摄像头实例代码
2021/06/28 HTML / CSS
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技