如果我将脚本放在html的底部，我应该在脚本标记上使用async还是更好

Question

使用什么更好？在脚本标记上使用async属性或只将脚本标记放在html的底部

Answer 1

取决于

如果存在async属性，则脚本一旦可用就会立即执行。因此，对于不能立即与DOM交互的脚本，这是最好的。

如果你把脚本放在html的底部，浏览器就不会获取脚本，直到完成页面的解析为止。

要获取并行，并在页面完成解析后执行，请使用defer属性。

注意：IE9不支持async和defer

Answer 2

我个人使用第二个选项，将脚本标记放在底部。但总是最好使用async属性，因为当我们链接外部资源时，除了改善用户体验之外，时间是一个重要因素，因为网页没有等待脚本完全加载。

Answer 3

没有async属性所有元素（包括<script>）在加载之前阻止页面呈现。这意味着<script>标记的位置不会影响页面加载速度（但可能会影响SEO）。 async属性提示浏览器可以继续加载而无需等待外部资源（脚本）。 defer属性表示浏览器可以稍后处理脚本。

并非所有外部脚本文件都可以异步加载。您必须首先尝试异步加载的内容而不是破坏您的页面，即使Google的PageSpeed Insight建议“消除渲染阻止JavaScript和CSS的首要内容”。

在https://developers.google.com/web/fundamentals/performance/阅读更好的说明。