你什么时候把 Javascript 放在 body 里，什么时候放在 head 里，什么时候使用 doc.load？ [复制]答案

【问题标题】：When do you put Javascript in body, when in head and when use doc.load? [duplicate]你什么时候把 Javascript 放在 body 里，什么时候放在 head 里，什么时候使用 doc.load？ [复制]
【发布时间】：2012-12-29 00:04:58
【问题描述】：

可能重复：
Where to place Javascript in a HTML file?
Should I write script in the body or the head of the html?

我一直在想，主要是因为我在创建页面时总是遇到麻烦，基于以下几点：

你什么时候写你的javascript

在<head>
在<body>
带有$(document).ready()

我可能很愚蠢，但我有几次因为错误的位置或是或否 doc.ready() 命令而没有执行我的 JavaScript (/jQuery)。所以我真的很想知道。

同样适用于 jQuery 和 'var' 命令

【问题讨论】：

嗯，var 和其他人完全不一样……
见this answer
对Pointy来说，我已经看到头部和身体也写了[var]，所以我想知道是否有任何区别。 Mark Schultheiss，我问的是差异，而不是一段脚本应该在头部还是身体中。这有点不同。不过，谢谢。

标签： javascript jquery location head document-body

【解决方案1】：

$(document).ready() 只是确保在加载 javascript 之前加载所有 DOM 元素。

什么时候不重要

不等待此事件触发，您最终可能会操作页面上尚不存在的 DOM 元素或样式。 DOM 就绪事件还允许您更灵活地在页面的不同部分运行脚本。例如：

<div id="map"></div>
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>

将运行，因为在脚本运行之前已加载地图 div。事实上，您可以通过将脚本放在页面底部来获得一些pretty good performance improvements。

什么时候重要

但是，如果您在 <head> 元素中加载脚本，则您的大部分 DOM 都没有加载。这个例子不起作用：

<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
<div id="map"></div>

不会，因为地图 div 尚未加载。

安全的解决方案

您可以通过等待整个 DOM 加载完成来避免这种情况：

<script type="text/javascript">$(document).ready(function () { 
    document.getElementById('map').style.opacity = 0;
});
</script>
<div id="map"></div>

有很多 articles 可以解释这一点，还有 jQuery documentation 本身。

【讨论】：

在外部样式表中加载它落在哪里？

【解决方案2】：

按照现代“最佳实践”，它是这样的：

将脚本放在<head> 中，当它们应该在页面开始呈现之前发生时。例如 HTML 5 shim 库或 Modernizr。
当对如何导入脚本的控制有限时，将脚本放入“就绪”处理程序中。可以包含在页面中以不显眼地添加功能的实用程序之类的东西通常使用“就绪”处理程序，因为它们无法确定如何使用它们。
如果在所有其他情况下都可以不使用，请将脚本放在 <body> 的末尾。

有时，您最终会在页面中产生依赖项，这些依赖项需要您原本希望在 body 元素末尾加载的内容。这是一种不受欢迎的情况，但如果您无法避免它可能会强制将脚本加载到 <head> 而不是 <body> 的末尾。

最好在文档末尾加载内容，因为浏览器在加载 <script> 标记的内容时会对其进行评估。（有一些“现代”方法可以避免这种情况，但这涉及到更复杂的领域。）

决定何时使用“就绪”处理程序（或“加载”处理程序，就此而言）与决定在何处放置<script> 标记略有不同。如果你有来自服务器端模板系统的页面内小部件生成（不希望，但你能做什么？）例如 jQuery 引用，那么你需要在页面顶部导入 jQuery，即使其他代码可能会将初始化推迟到“就绪”处理程序。也就是说，关于何时使用“就绪”的决定与你的脚本是否愿意依赖于在正确的位置被导入到页面中，或者它是否想要确保正确的事情发生而不管在哪里它的<script> 标签被放置。

【讨论】：

【解决方案3】：

这是您何时需要执行代码的问题。

如果您要操作 DOM 树（例如移动元素/显示隐藏等）并且将代码放在文档的头部，则执行代码时您的元素将不存在，因此您的代码不会工作。

在这种情况下，您可以将代码放在文档的头部，并在文档 DOM 准备好时调用它，$(document).ready()

很少需要将代码放在文档末尾，我能想到的一种情况是 google plus +1 按钮，这需要您在最后一个 +1 按钮之后放置一个脚本，因此您只需将其粘贴到末尾以确保您的文件。

【讨论】：

我同意这种方法。我知道“现代”的方式是将 JS 文件放在正文的末尾。但除非性能对任务至关重要，或者您希望您的用户使用旧版硬件/软件，否则将 JS 文件放在头上并没有错。事实上，用户甚至可能没有注意到任何性能差异。为了维护和清洁，我更喜欢将 JS 文件保留在头部或异步加载到头部。但是，如果页面只使用 vanilla JS，我可能会在 body 的末尾加载 JS 文件。