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脚本学习 比较实用的基础
Sep 07 Javascript
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
javascript-简单的计算器实现步骤分解(附图)
May 30 Javascript
js jq 单击和双击区分示例介绍
Nov 05 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
Jul 21 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
Jan 27 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
微信小程序用canvas画图并分享
Mar 09 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聊天室技术
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
react+redux仿微信聊天界面
2019/06/21 Javascript
js实现无限瀑布流实例方法
2019/09/16 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
JavaScript日期库date-fn.js使用方法解析
2020/09/09 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
Python性能提升之延迟初始化
2016/12/04 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
奢华时尚的独特视角:La Garçonne
2018/06/07 全球购物
校友会欢迎辞
2014/01/13 职场文书
事业单位竞聘上岗实施方案
2014/03/28 职场文书
选秀节目策划方案
2014/06/06 职场文书
社区创先争优承诺书
2014/08/30 职场文书
2014年班干部工作总结
2014/11/25 职场文书
小学生表扬稿范文
2015/05/05 职场文书
清明节主题班会
2015/08/14 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
升职感谢领导的话语及升职感谢信
2019/06/24 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL