JS script脚本中async和defer区别详解


Posted in Javascript onJune 24, 2020

一 引言

代码如下

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

可以看到在script标签中,存在async与defer两个属性,首先这两个属性并共存,说直白点,你一个都不加,或者加两个属性其一,脚本加载规则都会不同,这点我在之前确实没仔细了解过,导致我在实际开发中遇到了这样一个问题:

我在同一个页面需要引用2个script脚本,大致如下:

<script src="https://www.google.com/recaptcha/api.js"></script>
<script src="demo.js"></script>

注意,两个script脚本都没有添加async与defer属性,demo.js中包含了谷歌人机验证的初始化程序,正常来说一定得先加载必要的资源,这样我的验证码才能初始化成功,这就像使用jQuery得先引用jQuery.js是一个道理。

但事实上,因为外网的问题,api.js引用虽然在前面,但下载并不稳定,有时候会出现下载反而比demo.js更晚的情况,这就导致demo.js中的初始化报错,怎么办呢?这就得async与defer出场了,我们先来了解它们的区别。

二 属性async、defer与不加的区别

1 不加属性

引用script脚本,最常见的就是直接引用,不加其它属性,这种情况浏览器会立即下载并执行指定的脚本,一气呵成,脚本不执行完毕,后面的DOM加载全部给我候着,如下图:

JS script脚本中async和defer区别详解

2 属性async

了解ajax的同学对于async这个词一定不陌生,它表示异步,如果script脚本添加了此属性,浏览器会异步下载后立刻同步执行脚本。

说通俗点,脚本下载是异步行为,下载过程中并不影响DOM加载,但一旦脚本下载完毕就会立刻同步执行脚本,此时DOM加载还是得给我等着。如下图:

JS script脚本中async和defer区别详解

3 属性defer

与async一样属于异步下载脚本,但不同的地方是,脚本下载完成后并不会立刻执行,而是等到DOM解析完成才会执行脚本,相比async的粗暴,defer明显更加实用。加载顺序如下图:

JS script脚本中async和defer区别详解

现在我们知道了脚本属性async、defer以及不加的区别,回到文章开始的问题,我希望api.js一定在demo.js之前加载完成,不管需要等多久,所以我们可以这样修改:

<script src="https://www.google.com/recaptcha/api.js" async></script>
<script src="demo.js" defer></script>

那么到这里本文正式结束。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS父页面与子页面相互传值方法
Mar 05 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
js全选按钮的实现方法
Nov 17 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
javascript实现前端分页效果
Jun 24 #Javascript
JS实现多选框的操作
Jun 24 #Javascript
微信小程序实现发微博功能的示例代码
Jun 24 #Javascript
JavaScript实现答题评分功能页面
Jun 24 #Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 #Javascript
JS实现简单打字测试
Jun 24 #Javascript
微信小程序实现多选框功能的实例代码
Jun 24 #Javascript
You might like
php UTF8 文件的签名问题
2009/10/30 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
Codeigniter控制器controller继承问题实例分析
2016/01/19 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
javascript 写类方式之七
2009/07/05 Javascript
js jquery验证银行卡号信息正则学习
2013/01/21 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
基于Phantomjs生成PDF的实现方法
2016/11/07 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
JS中的多态实例详解
2017/10/15 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
Python Paramiko模块的使用实际案例
2018/02/01 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
python实现批量命名照片
2020/06/18 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
会计电算化专业应届大学生求职信
2013/10/22 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
二年级评语大全
2014/04/23 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
复试通知单模板
2015/04/24 职场文书
学校党支部承诺书
2015/04/30 职场文书