我在一些twitter bootstrap示例中看到了评论。它说
JavaScript放置在文档末尾，以便页面加载速度更快
这是真的吗？如果是，那么它是如何工作的？
答案 0 :(得分：10)
有许多优点
- 没有必要检查DOM是否已加载，因为有了 最后的脚本，你肯定知道。
- JavaScript脚本 必须在Web浏览器开始之前完全加载文件 下一个JavaScript文件。这个效果，如果是JavaScript文件 包含在文档的顶部，是它将是一个视觉 最终用户看到实际页面之前的延迟。这完全是 如果你在最后包含JavaScript文件，请避免使用 文档。
还有一些限制
虽然在底部包含JavaScript文件可以帮助我们解决问题 延迟页面渲染的问题，从而给人留下印象 网站中的每个页面加载速度更快，确实有一个缺点。
如果页面对最终用户可见，但JavaScript文件尚未完成加载，则没有任何事件应用于 元素呢（因为每个人都使用不引人注目的方法，对吧？） 用户可能会开始点击而没有达到预期的效果 结果
如果您有适当的后备，例如一个链接元素，如果支持JavaScript并且已经有适当的事件，它将通过AJAX获取内容 应用，否则它是通向另一个页面的正常链接 问题并不是那么糟糕。但是仍然有点烦人。
有用的文章Here
答案 1 :(得分：5)
如果浏览器遇到<script>标记， HTMLRenderer 将默认停止， ECMAscript解析器将完成其工作。 HTMLRenderer 将不会继续，直到所有Javascript代码都被完全评估。
因此，如果您的“上层”HTML代码中有许多<script>个代码和大量Javascript代码，则您网站的查看者可能会意识到加载过程缓慢。< / p>
有几种方法可以避免这个问题。首先，正如您所提到的，只需将所有Javascript代码和<script>标记放在<body>元素的最底部即可。这样可以确保至少所有 HTML标记和样式表定义都已完全加载。
另一个选项是<script>元素本身的标记名称。例如async和defer将向浏览器 / JS Parser 指示此填充不需要立即加载和评估。例如
<script async defer src="/foo/bar.js"></script>
HTML渲染器将实现标记并将其存储到队列中，但不会直接停止和评估。
答案 2 :(得分：3)
大多数浏览器使用相同的线程执行JavaScript并加载页面。因此，当JavaScript执行时，页面无法加载。因此，如果您的页面包含大量图像或嵌入内容，则在JavaScript完成执行之前，这些资产将不会开始加载。
这就是建议将长时间运行的同步代码放在文档末尾，或者在页面加载或加载DOM内容时将其推迟加载的原因。但是，现代浏览器通常会通知用户长时间运行的阻塞脚本，并允许它们根据需要终止脚本。
答案 3 :(得分：1)
与将它们放在页面末尾一样重要，使用HTML5 async属性将它们指定为 async 。这将确保解析器不会停止并解析它们，而是继续页面加载流程并并行地下载/解析JS。
答案 4 :(得分：0)
这个概念背后的逻辑是，由于浏览器动态呈现你的代码，通过将所有html元素放在脚本之前，理论上加载速度比你先编写脚本时要快，假设你有一个天文数量的要处理的脚本。
在实践中，然而没有人会遇到需要如此多的脚本时间的情况，这会影响网站的负载时间，而不是作为D / L带宽的更紧迫的瓶颈。