javascript 代码是不是应该始终加载到 html 文档的头部？

Posted 2023-03-21

【中文标题】javascript 代码是不是应该始终加载到 html 文档的头部？

【英文标题】：Should javascript code always be loaded in the head of an html document?javascript 代码是否应该始终加载到 html 文档的头部？

【发布时间】：2010-12-18 11:57:05

【问题描述】：

在如何加载 javascript 方面是否存在一揽子规则。我看到人们说它现在应该放在页面的末尾。

想法？

【问题讨论】：

developer.yahoo.com/performance/rules.html#js_bottom

【参考方案1】：

将其放在文档末尾的想法是确保在尝试引用文档中的元素之前已下载文档的全部内容。如果先加载 JavaScript，则代码可能会在文档尚未准备好时去寻找元素。

jQuery 使用 ready 函数解决了这个问题：

绑定要执行的函数 每当 DOM 准备就绪时 遍历和操纵。

这可能是最重要的 事件模块中包含的功能， 因为它可以大大提高响应 您的网络应用程序的时间。

还有性能考虑建议在页面底部包含 JavaScript 文件 - 这是因为下载 JavaScript 文件可能会阻止所有其他 HTTP 请求（对于图像、CSS、等）直到完成。

【讨论】：

主要原因实际上是性能，恕我直言。尽管相关，但 DOM 准备好多年来一直不是问题。

【参考方案2】：

嗯，有两种情况（至少）取决于您想要实现的目标。如果您需要在页面加载之前或期间可用的脚本或脚本中包含的功能，例如函数库，那么您应该在 head 标记中加载 JavaScript 代码。 如果您需要做一些需要仅在页面加载后才可用的资源（即 DOM 资源）的事情，那么您应该在页面底部加载脚本（这也可以使用 onDOMReady 事件解决已经在大多数 JavaScript 框架中可用）。 还有一些性能问题可能会影响您的决定。例如，在某些情况下，在 head 标签中加载一个或多个脚本会减慢页面渲染速度，如果您可以提供页面渲染的基本功能，直到脚本完全正常运行，那么应该再次在底部加载一个或多个脚本。 这或多或少取决于您需要做什么。

【参考方案3】：

如果您需要在文档仍在加载时使用 javascript 运行一些特殊逻辑，您可以将最少的代码放在顶部。但实际上，当今富 Web 应用程序中的所有 javascript 使用都需要在文档准备好之后，因此<script> 标签可以安全地放在</body> 之后。

这是一个非常相关的阅读：http://developer.yahoo.com/performance/rules.html

【参考方案4】：

没有规则：如果要先加载Js，则将其放在头部。如果您希望它成为浏览器加载的最后一件事，请将其放在底部。

对于可以使用 JS 的网站，您可能希望将其放在顶部，在头部。对于降级良好的网站，您将关注 Yahoo!建议并让页面呈现，然后加载脚本。

注意：这与在加载 DOM 之前或之后执行脚本无关。这个问题不是真正的问题，大多数时候您使用 onload 或 $.ready 等价物。这是关于文件实际加载而不是执行的时间。

【讨论】：

我同意你关于 DOM 准备的观点；但是，除非它们被延迟 (defer="defer")，否则加载时间与执行时间相同。

【参考方案5】：

我喜欢在部署到生产环境时将代码最小化到一个文件中。因此，在开发过程中，我为每个 JavaScript 类创建了一个文件，并将每个文件加载到头部（在 CSS 文件之后）。由于我等待来自浏览器的事件表明 DOM 已准备就绪，因此我将我的 JS 文件放在唯一的 HTML/JSP 页面的头部。