【美团】异步加载 JS 脚本时，async 与 defer 有何区别

行走在奥卡万戈河中的大象，博茨瓦纳，非洲南部
(© Markus Pavlowsky/Getty Images)❞async 与 defer 区别

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

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

而 defer 与 async 的区别如下:那我要

相同点: 「异步加载 (fetch)」
不同点:

async 加载(fetch)完成后立即执行 (execution)，因此可能会阻塞 DOM 解析；
defer 加载(fetch)完成后延迟到 DOM 解析完成后才会执行(execution)**，但会在事件 DomContentLoaded 之前

拓展

当以下 index.js 加载时，属性是 async 与 defer 时，输出有何不同？

「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 有可能之前也有可能之后

Reference

[1]

Daily Question: https://q.shanyue.tech

[2]

原文: https://html.spec.whatwg.org/multipage/scripting.html#the-script-element

【美团】异步加载 JS 脚本时，async 与 defer 有何区别

拓展

Reference

相关推荐