script 标签上的defer和async的区别

最新推荐文章于 2023-08-14 23:20:03 发布

森哥的歌

最新推荐文章于 2023-08-14 23:20:03 发布

阅读量700

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_41275295/article/details/101000787

版权

前端专栏收录该内容

39 篇文章 2 订阅

订阅专栏

本文将介绍script标签上的两种异步加载属性defer 和async的使用和区别
我们都知道默认情况下我们的页面会按顺序加载和执行js，在这个过程中，js后面的dom加载将会被堵塞，这就导致了如果我们引入了一个较大或者网络请求较慢的外部文件，页面白屏的时间会很长，影响页面效果。这也是为什么我们通常把js写在body后的原因。那么如果我们非要在dom前面引入js怎么办，如何能在不堵塞dom渲染的情况下加载和运行js呢？
script标签为我们提供了两种异步加载js属性：defer和async。

一：用法

<!-- 普通的引入 -->
<script src="a.js" ></script>
<!-- defer -->
<script src="a.js" defer></script>
<!-- async -->
<script src="a.js" async></script>

用法比较简单，只需要在script标签上直接写上属性名即可

二：区别
既然都是异步，为何还要引入两种属性？这说明他们肯定是有区别的。

defer 是异步加载资源，但是会在文档渲染完毕，DOMContentLoaded事件执行前执行。如果页面有两个defer标记的script，他们会按他们在页面的顺序执行。
async 也是异步加载资源，如果页面存在多个async标记的script标签。async 是在谁加载完了，谁就执行，并不保证顺序。且不一定在dom渲染完成前执行或者加载完成。

三：验证上面的区别
准备

html页面一个
引入一个外部的cdn资源（保证有足够的延迟），以jquery cdn资源为例
准备两个本地的js文件
test1.js 里面打印$变量
test2.js 里面打印字符串 “default”
定义一个DOMContentLoaded事件,打印 “dom ready”

验证1:
如果同时存在两个defer，看他们的执行顺序

<!DOCTYPE html>
<html lang="en">
<head>
  <script defer src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script defer src="test1.js"></script>
  <script src="test2.js"></script>
</head>
<body>
</body>
<script>
  window.addEventListener('DOMContentLoaded', function () {
    console.log('dom ready')
  })
</script>
</html>

运行效果如图：
defer 的两个都在DOMContentLoaded前执行，且按顺序执行了。于是能打印出$函数。
在这里插入图片描述
验证二：
如果存在两个async，看他们的执行顺序

<!DOCTYPE html>
<html lang="en">
<head>
  <script async src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script async src="test1.js"></script>
  <script src="test2.js"></script>
</head>
<body>
</body>
<script>
  window.addEventListener('DOMContentLoaded', function () {
    console.log('dom ready')
    console.log($)
  })
</script>
</html>

结果如下，我们在test1.js 和 DOMContentLoaded事件里都尝试打印$ 均失败，说明test1.js 和jquery不是按顺序执行的。jquery在是在DOMContentLoaded事件后加载和执行的。
在这里插入图片描述
通过两个实验。基本证明了上面描述的两者的区别和作用机制是正确的。

四：使用场景
async 因为加载完了就立马执行，且不保序，不保证dom渲染结束完成后执行，适合用在互相没有依赖且对dom没有依赖的js脚本。比如百度访问统计的插件js，比如一些第三方的客服插件，分享插件等。
defer 因为保序，且在dom渲染结束后 DOMContentLoaded事件触发前执行，所以适合用在互相有依赖,且对dom也有一定依赖的脚本。比如一些文本编辑器插件，弹窗插件，第三方框架的全家桶的一批插件的引入。