为什么给要script标签添加 async 或 defer？

邻居家的大灰狼
VIP.5 如鱼得水
2,681 阅读6分钟

前言

在了解script标签添的 async 和 defer 属性之前，先来介绍一下浏览器的 load 与 DOMContentLoaded 事件。

1. load 与 DOMContentLoaded 的区别

load :

当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。

它与DOMContentLoaded不同，后者只要页面DOM加载完成就触发，无需等待依赖资源的加载。

DOMContentLoaded :

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。另一个不同的事件 load 应该仅用于检测一个完全加载的页面。

注意： DOMContentLoaded 事件必须等待其所属 script 之前的样式表加载解析完成才会触发。

可以参考下面这段代码效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #aaa{
      width: 600px;
      height: 300px;
      background-color: pink;
    }
    #aaa>div{
      width: 100px;
      height: 100px;
      background-color:black;
    }
  </style>
</head>
<script>
  window.addEventListener("load", function(event) {
      console.log("page is fully loaded 页面已完全加载");
  });

  document.addEventListener("DOMContentLoaded", function(event) {
      console.log("DOM fully loaded and parsed DOM已完全加载和解析");
  });

  for(var i=0; i<1000000000; i++){
      // 这个同步脚本将延迟DOM的解析。
      // 所以DOMContentLoaded事件稍后将启动。
  } 
</script>
<body>
  <div id="aaa">
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
</html>

来看看控制台中是怎么打印的👇

2. script 标签中 async 和 defer

async :

对于普通脚本，如果存在 async 属性，那么普通脚本会被并行请求，并尽快解析和执行。

对于模块脚本，如果存在 async 属性，那么脚本及其所有依赖都会在延缓队列中执行，因此它们会被并行请求，并尽快解析和执行。

该属性能够消除解析阻塞的 Javascript。解析阻塞的 Javascript 会导致浏览器必须加载并且执行脚本，之后才能继续解析。defer 在这一点上也有类似的作用。

这是个布尔属性：布尔属性的存在意味着 true 值，布尔属性的缺失意味着 false 值。

defer :

这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后，触发 DOMContentLoaded 事件前执行。

有 defer 属性的脚本会阻止 DOMContentLoaded 事件，直到脚本被加载并且解析完成。

注意：如果缺少 src 属性（即内嵌脚本），该属性不应被使用，因为这种情况下它不起作用。

defer 属性对模块脚本没有作用 —— 他们默认 defer。

将上一段代码稍微做一点修改：

html 部分：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #aaa{
      width: 600px;
      height: 300px;
      background-color: pink;
    }
    #aaa>div{
      width: 100px;
      height: 100px;
      background-color:black;
    }
  </style>
</head>
<script src="js/async.js" async></script>
<body>
  <div id="aaa">
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>
<script>
  console.log('内嵌js开始执行')
  window.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed DOM已完全加载和解析");
  });

  window.addEventListener("load", function(event) {
    console.log("page is fully loaded 页面已完全加载");
  });
  for(var i=0; i<1000000000; i++){
    // 这个同步脚本将延迟DOM的解析。
    // 所以DOMContentLoaded事件稍后将启动。
  }
  try{
    console.log(a)
  }
  catch(err){
    console.log(err)
  }
  console.log('内嵌js执行结束')
</script>
</html>

引入的 async.js：

console.log('外部async.js开始执行')
var a = 666;

for(var i=0; i<1000000000; i++){
  // 这个同步脚本将延迟DOM的解析。
  // 所以DOMContentLoaded事件稍后将启动。
}
console.log('外部async.js执行结束')

此时 script 标签中未添加任何属性，来看看控制台是怎么打印的👇

注意： 同步 JavaScript 会暂停 DOM 的解析。

可以看到，在控制台中正常打印出 a 值。script 代码也是从上往下执行。但是会出现短暂的白屏。

接下来给 script 标签添加 async 属性，再来看看效果🤔

可以看到页面加载过程中没有出现白屏现象✌

此时外部的脚本不会阻塞 DOM 的渲染，但程序抛出了一个错误，a 未定义，这是因为 async 的作用是让浏览器能够异步的加载脚本，不因加载脚本而阻塞页面的加载。不过不能保证 DOM 已经完全加载（也就是说，async 属性告诉浏览器先把文件下载下来，在“时机成熟”的时候再执行。异步脚本一定会在页面的 load 事件前执行，但可能会在 DOMContentLoaded 事件触发之前或之后执行。而且更加需要注意的是，标记为 async 的脚本并不保证按照指定他们的先后顺序执行。所以，确保各个异步脚本互不依赖非常重要）。

再来把 script 标签中的 async 改成 defer，来看看效果。

defer 效果与 async 类似都不会阻塞 DOM 的渲染，但该脚本将在文档完成解析后，DOMContentLoaded 事件触发之前执行。

可以通过下面这张图来加深理解。

相同点 :

  • 都是异步的加载外部 js 文件，加载时不会阻塞DOM渲染
  • 都在页面 onload 之前执行
  • 对于内嵌脚本无效

不同点 :

  • async 属性的脚本无法确定是在 DOMContentLoaded 事件触发之前或之后执行。defer 属性的脚本在 DOMContentLoaded 事件触发之前执行。
  • async 属性的脚本并不一定会按照顺序执行（先加载完成先执行），defer 属性的脚本会按照顺序执行。

其实完全可以把 script 都写在 body 底部，这样既没有白屏问题，也没有执行顺序问题。

参考文章： defer和async的区别

avatar
文章
阅读
粉丝