Question

可能重复：
  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'命令

Answer 1

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

无关紧要

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

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

将运行，因为在脚本运行之前已加载了map 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本身。

Answer 2

通过现代“最佳实践”，就像这样：

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

有时你最终会在页面中依赖于你需要在body元素末尾加载的东西。这是一种不受欢迎的情况，但如果你无法避免，可以强制脚本加载到<head>而不是<body>的末尾。

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

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

Answer 3

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

如果您要操作DOM树（例如移动元素/ show-hide等）并将代码放在文档的头部，那么在执行代码时元素将不存在，因此您的代码不行。

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

将代码放在文档的末尾很少是必要的，有一次我能想到的是google plus +1按钮，这需要你在最后一个+1按钮后放置一个脚本，所以你只需坚持到最后你的文件是否确定。

你什么时候把Javascript放在体内，当你在头上和使用doc.load时？

3 个答案: