JS中script标签defer和async属性的区别详解


Posted in Javascript onAugust 12, 2016

向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前。

script标签存在两个属性,defer和async,因此script标签的使用分为三种情况:

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

 没有defer或async属性,浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前,不等待后续加载的文档元素,读到就开始加载和执行,此举会阻塞后续文档的加载;

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

有了async属性,表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的,即异步执行;

3.<script defer src="example.js"></script>

有了defer属性,加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步),js脚本的执行需要等到文档所有元素解析完成之后,DOMContentLoaded事件触发执行之前。

下图可以直观的看出三者之间的区别:

JS中script标签defer和async属性的区别详解

其中蓝色代表js脚本网络加载时间,红色代表js脚本执行时间,绿色代表html解析。

从图中我们可以明确一下几点:

1.defer和async在网络加载过程是一致的,都是异步执行的;

2.两者的区别在于脚本加载完成之后何时执行,可以看出defer更符合大多数场景对应用脚本加载和执行的要求;

3.如果存在多个有defer属性的脚本,那么它们是按照加载顺序执行脚本的;而对于async,它的加载和执行是紧紧挨着的,无论声明顺序如何,只要加载完成就立刻执行,它对于应用脚本用处不大,因为它完全不考虑依赖。

小结:

defer 和 async 的共同点是都是可以并行加载JS文件,不会阻塞页面的加载,不同点是 defer的加载完成之后,JS会等待整个页面全部加载完成了再执行,而async是加载完成之后,会马上执行JS,所以假如对JS的执行有严格顺序的话,那么建议用 defer加载。

以上所述是小编给大家介绍的JS中script标签defer和async属性的区别详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JAVASCRIPT下判断IE与FF的比较简单的方式
Oct 17 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
JavaScript阻止事件冒泡示例分享
Dec 28 Javascript
详述JavaScript实现继承的几种方式(推荐)
Mar 22 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
原生js实现移动端Touch轮播图的方法步骤
Jan 03 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 #Javascript
很实用的js选项卡切换效果
Aug 12 #Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 #Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 #Javascript
jquery实现垂直和水平菜单导航栏
Aug 27 #Javascript
JS实现图片剪裁并预览效果
Aug 12 #Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 #Javascript
You might like
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
四个PHP非常实用的功能
2015/09/29 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
Vue.js系列之项目搭建(1)
2017/01/03 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
python del()函数用法
2013/03/24 Python
详细介绍Python语言中的按位运算符
2013/11/26 Python
微信跳一跳自动运行python脚本
2018/01/08 Python
jupyter notebook引用from pyecharts.charts import Bar运行报错
2020/04/23 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
Django实现单用户登录的方法示例
2019/03/28 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
linux面试题参考答案(5)
2016/11/05 面试题
医学院学生求职简历的自我评价
2013/10/24 职场文书
水污染治理专业毕业生推荐信
2013/11/14 职场文书
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
学生保证书格式
2015/02/27 职场文书
北大自主招生自荐信
2015/03/04 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server