DDR爱好者之家

JS script脚本中async和defer区别详解
站长资源 2024/12/26 佚名
76 1538
DDR爱好者之家 Design By 杰米

一 引言

代码如下

<script src="/UploadFiles/2021-04-02/api.js">

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

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

<script src="/UploadFiles/2021-04-02/api.js">


注意，两个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="/UploadFiles/2021-04-02/api.js">


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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米