javascript - 使用 "defer"属性时是否需要将脚本放在页面底部？

Question

我总是将我的脚本标签放在页面底部，因为在 HTML/CSS 和文本等内容完成加载后加载脚本是一种很好的做法。我刚刚发现了 defer 属性，它基本上做同样的事情，那就是它会等到页面完成加载后再获取和执行脚本。

因此，如果使用 defer 属性，是否有必要将 script 标签物理地放置在页面底部而不是 head 标签内？

我发现将 script 标签放在 head 部分内对可读性更好。

<script src="script.js" defer="defer"></script>

或

<script defer="defer">

// do something

</script>

Answer 1

当前的最佳实践？ 在头部按顺序使用延迟脚本，除非您需要支持旧版浏览器(IE < 10、Opera Mini 等)- 97.45% 的浏览器使用率 (ref)

为什么？使用 defer 时，解析就像我们将脚本放在 body 标记的末尾一样完成，但总体而言脚本执行早于结束，因为脚本已与 HTML 解析并行下载。此场景将触发用于提高页面加载速度的更快的 domInteractive 事件。使用 async，脚本的执行顺序会根据脚本的获取速度而变化，因此顺序可能会受到影响。此外，async 脚本内联执行并暂停 HTML 的解析。