将JS脚本放在文档底部相比放在顶部的好处。

Question

相比于在页面顶部加载JS，将JS放在文档底部有哪些实际的好处（如果有的话）？看起来会有短暂的页面加载延迟和JS依赖功能问题。

我正在使用html5boilerplate开始所有我的模板，但不确定将JS放在底部是否真的有多大好处。

它真的会带来很大的差异吗？如果是这样，为什么？

- jeffreynolte

---

浏览器会停止渲染页面，直到每个 JavaScript 代码块执行完毕。对于小的 JavaScript 代码块来说，这不是一个大问题。但是对于大型库来说，页面加载时间可能会显著增加。 - a'r

这要看你在做什么，但 Chrome 开发者工具中的“网络”选项卡（F12）可以显示页面加载需要多长时间以及哪些文件需要较长时间。 - Karl Gjertsen

Answer 1

1. 如果你将外部 js 文件包含在页面底部，那么你会优先考虑呈现给客户端的可视化展示而不是交互逻辑或动态内容的请求处理。我认为，如果你没有使用内容分发网络向客户端传递图像，则最多只能同时处理 2 个 HTTP 请求。你不想浪费这些请求来处理逻辑，因为我们都知道最终用户有多么不耐烦。

2. 通过在文件末尾加载 js，你可以访问 DOM（大部分情况下）而无需调用 document.ready() 函数。如果页面加载最终到达你的 javascript 代码时，通常必要的页面元素已经加载完毕。

还有其他一些原因，但这些是我在感觉将所有 js 放在底部很奇怪时要记住的重要原因。

- Tim Joyce

Answer 2

由于正在下载的脚本，浏览器通常不会同时下载其他文件，从而减慢页面加载速度。

参考：加速网站的最佳实践。

- Adam Price

Answer 3

一次Google搜索将返回大量与为什么要这样做以及你会看到什么改进有关的结果。请查看以下链接：

• 高性能Web站点：规则6-将脚本移到底部
• Rails最佳实践：脚本在底部

基本上，这样做的主要原因是您将提高页面的渲染时间。来自第一篇文章的引用如下：

[我]尽可能将脚本从顶部移到页面底部。一个原因是启用渐进式渲染，但另一个原因是实现更大的下载并行化。

- JasCav

Answer 4

根据JS文件的内容，需决定何时执行。如果想让它在页面加载时就执行，请将您的代码放在jQuery代码块中：$(function(){}) 或者将其放置在页面底部。

- Naftali

---

但是当jQuery尚未加载时，您不能在页面中间使用$ - 正如我刚刚发现的那样。 - Chris