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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
JS 字符串连接[性能比较]
May 10 Javascript
在javascript中如何得到中英文混合字符串的长度
Jan 17 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
浅谈jquery中使用canvas的问题
Oct 10 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
详解jQuery设置内容和属性
Apr 11 jQuery
vue中data里面的数据相互使用方式
Jun 05 Vue.js
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
通过html表格发电子邮件
2006/10/09 PHP
全文搜索和替换
2006/10/09 PHP
php 什么是PEAR?(第二篇)
2009/03/19 PHP
php 获取全局变量的代码
2011/04/21 PHP
php数字每三位加逗号的功能函数
2015/10/22 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
vue-router 控制路由权限的实现
2020/09/24 Javascript
JavaScript中layim之整合右键菜单的示例代码
2021/02/06 Javascript
python3.3实现乘法表示例
2014/02/07 Python
python字符串替换示例
2014/04/24 Python
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
python处理大数字的方法
2015/05/27 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
python实现126邮箱发送邮件
2020/05/20 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
大学军训感言300字
2014/03/09 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
办公室岗位职责
2015/02/04 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
运动会加油稿
2015/07/22 职场文书
js之ajax文件上传
2021/05/13 Javascript
Python中的嵌套循环详情
2022/03/23 Python