极客时间返利平台,你可以在上边通过山月的链接购买课程,并添加我的微信 (shanyue94) 领取返现。
每天晚上九点 B站讲解前端工程化直播,并解答相关问题。

# 异步加载 JS 脚本时,async 与 defer 有何区别

Issue

欢迎在 Gtihub Issue 中回答此问题: Issue 456 (opens new window)

以下图片取自 whatwg 的规范,可以说是最权威的图文解释了,详细参考原文 (opens new window)

async 与 defer 区别

正常情况下,即 <script> 没有任何额外属性标记的情况下,有几点共识

  1. JS 的脚本分为加载、解析、执行几个步骤,简单对应到图中就是 fetch (加载) 和 execution (解析并执行)
  2. JS 的脚本加载(fetch)且执行(execution)会阻塞 DOM 的渲染,因此 JS 一般放到最后头

deferasync 的区别如下:

  • 相同点: 异步加载 (fetch)
  • 不同点:
    • async 加载(fetch)完成后立即执行 (execution),因此可能会阻塞 DOM 解析;
    • defer 加载(fetch)完成后延迟到 DOM 解析完成后才会执行(execution)**,但会在事件 DomContentLoaded 之前

# 拓展

当以下 index.js 加载时,属性是 asyncdefer 时,输出有何不同?

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
  </head>
  <body>
    <script src="./defer.js" defer></script>
    <script src="./async.js" async></script>
    <script>
      console.log("Start");
      document.addEventListener("DOMContentLoaded", () => {
        console.log("DCL");
      });
    </script>
  </body>
</html>

derfer.js

console.log("Defer Script");

async.js

console.log("Async Script");

答:defer 总是在 DCL 之前输出,但是 async 有可能之前也有可能之后

start/Async Script/DCL

Last Updated: 11/27/2021, 10:11:48 AM