延迟脚本和放置在页面正文末尾的脚本有什么区别？答案

【问题标题】：What's the difference between deferred scripts and scripts placed at the end of the page body?延迟脚本和放置在页面正文末尾的脚本有什么区别？
【发布时间】：2012-10-22 09:18:19
【问题描述】：

HTML5 为可以在 HTML 页面中延迟加载的脚本引入了 defer 属性。 defer 可用于任何不需要在 DOM 之前加载的脚本（也就是在 DOM 准备好之前不要弄乱它）。

长期以来，建议 Web 开发人员将所有不需要加载的脚本放在 DOM 之前，而不是放在页面 head 中，而是放在 body 标记的末尾之前。

defer 的使用与长期实践的建议有什么区别？前者能代替后者吗？

感谢任何回答。谢谢。

【问题讨论】：

我相信即使你使用 defer，脚本仍然会被下载，它可能会减慢整个页面的加载速度
把脚本放在最底层的想法不仅是为了延迟执行，也是为了延迟下载

标签： javascript html web-applications

【解决方案1】：

async 和 defer 脚本都立即开始下载而无需暂停解析器，并且都支持可选的 onload 处理程序来解决执行依赖于脚本的初始化的常见需求。

来自WebKit blog，因此所有浏览器的行为不一定相同。因此，如果脚本仍然在最后，性能会更好，因为它们将在稍后下载。

2017 年编辑：浏览器支持现在好多了，因此您可能可以在头脑中摆脱异步/延迟脚本。将它们放在底部可能仍然是一个更安全的选择。新的浏览器仍然会提前下载它们，即使它们不在头脑中。

Edit 2020：现在，除非您支持非常旧的浏览器，否则您应该继续使用 async/defer。

【讨论】：

为什么以后下载脚本性能会更好？尽快下载脚本不是性能更好吗？
@RuudLenders 因为当时支持不完整，很多浏览器会立即下载脚本，这会阻止渲染，直到脚本下载并执行。四年半后现在支持好多了，但是浏览器开始下载的时间差异很小（如果有的话，准备好了）所以我还是把它们放在正文的末尾。