&引用；JavaScript放在文档末尾，以便页面加载更快”；是吗？

可能重复：

我在一些twitter引导示例中看到了一条评论。上面说

将JavaScript放在文档末尾，以便页面加载速度更快

---

这是真的吗？？如果是，那么它是如何工作的？？？

如果浏览器遇到一个

标记，默认情况下HTMLRenderer将停止，ECMAscript解析器将完成它的工作。HTMLRenderer将不会继续，直到所有Javascript代码都被完全解析

因此，如果您的“上层”HTML代码中有许多

标记和大量Javascript代码，那么您站点的查看器可能会实现缓慢的加载过程

有几种方法可以避免此问题。第一个是，正如您所提到的，将所有Javascript代码和

标记放在

元素的最底部。这确保了至少所有HTML标记和样式表定义都已完全加载

另一个选项是

元素本身的标记名。例如

async

和

defer

将向浏览器/JS解析器指示不需要立即加载和评估此填充。比如说

<script async defer src="/foo/bar.js"></script>

---

HTML呈现程序将实现标记并将其存储到队列中，但它不会直接停止和计算。

大多数浏览器执行JavaScript并使用相同的线程加载页面。因此，当JavaScript执行时，无法加载页面。因此，如果页面包含大量图像或嵌入内容，则在JavaScript完成执行之前，这些资产不会开始加载

这就是建议将长时间运行的同步代码放在文档末尾的原因，或者在页面加载或DOM内容加载时延迟加载。然而，现代浏览器通常会通知用户长时间运行的阻塞脚本，并允许用户根据需要终止脚本

有许多优点

• 不需要检查DOM是否已加载，因为 最后的脚本，你肯定知道
• JavaScript脚本 在web浏览器开始之前，必须完全加载文件 下一个JavaScript文件。如果JavaScript文件 都包含在文档的顶部，是指它将是一个可视的 最终用户看到实际页面之前的延迟。这完全是错误的 如果将JavaScript文件包含在 文件

也有一些限制

在底部包含JavaScript文件有助于我们解决问题 延迟页面呈现从而给人留下印象的问题 网站中的每个页面都加载得更快，这确实有一个缺点

• 如果最终用户可以看到该页面，但JavaScript文件尚未完成加载，则不会向该页面应用任何事件 元素（因为每个人都使用不引人注目的方法，对吗？） 用户可能会开始四处点击，而没有得到预期的结果 结果

• 如果您有适当的回退，例如，如果支持JavaScript并且已创建适当的事件，则链接元素通过AJAX获取内容 应用，否则它是指向另一个页面的正常链接，然后 问题没那么严重。不过还是有点烦人

---

有用的文章

与将它们放在页面末尾一样重要的是，使用HTML5

async

属性将它们指定为async。这将确保解析器不会停止并解析它们，而是继续页面加载流并并行下载/解析JS

---

这一概念背后的逻辑是，由于浏览器会动态呈现代码，通过将所有html元素放在脚本之前，理论上它的加载速度可能比您先使用脚本时更快，假设您要处理的脚本数量达到天文数字

---

然而，在实践中，任何人都不应该遇到这样一种情况，即需要如此多的脚本时间，以至于会通过更紧迫的瓶颈（如D/L带宽）影响网站的加载时间。

页面加载速度可能会更快，因为“事情显示”越快，这取决于浏览器和网站布局。如果您的JavaScript呈现页面的标题，则不会，它不会很快显示。如果脚本在末尾，dow是否执行

async

属性帮助？@JanDvorak-浏览器不会在标题中显示加载指示器，给用户页面加载完成的印象。您有一些源代码参考吗？我认为主要的问题是JS文件加载时间延迟了页面显示。