[TOC]

一、当浏览器加载 HTML 时遇到 标签，浏览器就不能继续构建 DOM。它必须立刻执行此脚本。对于外部脚本 也是一样的：浏览器必须等脚本下载完，并执行结束，之后才能继续处理剩余的页面。
二、这会导致两个重要的问题：
1、脚本不能访问到位于它们下面的 DOM 元素，因此，脚本无法给它们添加处理程序等。
2、如果页面顶部有一个笨重的脚本，它会“阻塞页面”。在该脚本下载并执行结束前，用户都不能看到页面内容：

<p>...content before script...</p>

<script src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>

<!-- This isn't visible until the script loads -->
<p>...content after script...</p>

三、解决方案
1、方案1：把脚本放在页面底部。此时，它可以访问到它上面的元素，并且不会阻塞页面显示内容：

<body>
  ...all content is above the script...

  <script src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>
</body>

缺点：浏览器只有在下载了完整的 HTML 文档之后才会注意到该脚本（并且可以开始下载它）。对于长的 HTML 文档来说，这样可能会造成明显的延迟。
2、方案2：有两个