JSscript脚本中async和defer区别详解
⼀引⾔
代码如下
<script src="le/recaptcha/api.js" async defer></script>
可以看到在script标签中，存在async与defer两个属性，⾸先这两个属性并共存，说直⽩点，你⼀个都不加，或者加两个属性其⼀，脚本加载规则都会不同，这点我在之前确实没仔细了解过，导致我在实际开发中遇到了这样⼀个问题：
我在同⼀个页⾯需要引⽤2个script脚本，⼤致如下：
<script src="le/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加载全部给我候着，如下图：
2 属性async
了解ajax的同学对于async这个词⼀定不陌⽣，它表⽰异步，如果script脚本添加了此属性，浏览器会异步下载后⽴刻同步执⾏脚本。
说通俗点，脚本下载是异步⾏为，下载过程中并不影响DOM加载，但⼀旦脚本下载完毕就会⽴刻同步执⾏脚本，此时DOM加载还是得给我等着。如下图：
3 属性defer
与async⼀样属于异步下载脚本，但不同的地⽅是，脚本下载完成后并不会⽴刻执⾏，⽽是等到DOM解析完成才会执⾏脚本，相⽐async的粗暴，defer明显更加实⽤。加载顺序如下图：
现在我们知道了脚本属性async、defer以及不加的区别，回到⽂章开始的问题，我希望api.js⼀定在demo.js之前加载完成，不管需要等多久，所以我们可以这样修改：js脚本编程入门
<script src="le/recaptcha/api.js" async></script>
<script src="demo.js" defer></script>
那么到这⾥本⽂正式结束。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。