可能是重复问题：
在HTML文件中放置JavaScript的位置？
我应该将脚本写在HTML的还是中？
我一直很好奇，主要是因为当我创建页面时，总是遇到麻烦，基于以下事情：
你什么时候编写JavaScript
<head>标签中<body>标签中$(document).ready()我可能很傻，但有几次我的JavaScript（/ jQuery）未被执行，因为位置错误或没有正确使用doc.ready()命令。所以我真的很好奇。
对于jQuery和“var”命令也是如此。
$(document).ready() 简单来说就是确保所有DOM元素在你的Javascript加载之前都已经被加载完毕。
当它不重要时
如果没有等待该事件触发，您可能会在页面上操作尚未存在的DOM元素或样式。而DOM准备就绪事件也允许您更灵活地在页面的不同部分运行脚本。例如：
<div id="map"></div>
<script type="text/javascript">document.getElementById('map').style.opacity = 0;</script>
由于地图 div 在脚本运行之前已经加载，因此该脚本将运行。实际上，通过将脚本放置在页面底部，您可以获得一些相当不错的性能优化。
何时会有影响
然而，如果您在 <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>
根据现代的“最佳实践”，应该这样做：
<head> 中，当它们需要在页面开始呈现之前发生时。例如：HTML 5 shim 库或Modernizr。<body> 的末尾。有时，页面中存在依赖项需要加载要在 body 元素结尾处加载的内容。虽然这是一种不可取的情况，但如果无法避免，则可能会强制脚本在 <head> 中加载，而不是在 <body> 的末尾加载。
将内容加载到文档末尾很好，因为浏览器在加载 <script> 标记时会评估其内容。（虽然有一些“现代”的方法可以避免此问题，但那将涉及更加复杂的领域）
关于何时使用“ready”处理程序（或“load”处理程序），决策与放置 <script> 标记的决策有点不同。例如，如果您从服务器端模板系统中获得单页小部件（不理想，但无可奈何）生成jQuery引用，则需要在页面顶部导入jQuery，即使其他代码可能推迟初始化到“ready”处理程序。也就是说，关于何时使用“ready”处理程序的决策取决于您的脚本是否愿意依靠以正确的位置导入到页面上，或者它是否希望确保正确的事情发生，而不管其 <script> 标记放置在哪里。
重要的是你需要代码在何时被执行。
如果你要操作DOM树（例如移动元素/显示隐藏等）并且将你的代码放在文档的头部，当你的代码被执行时你的元素将不会存在，因此你的代码将无法工作。
在这种情况下，你可以把你的代码放在文档的头部，在文档DOM准备就绪后调用它，使用$(document).ready()
将代码放在文档末尾很少是必要的，我能想到的唯一的一个场景是谷歌加+1按钮，它要求你在最后一个+1按钮之后放置一个脚本，所以你只需把它粘贴到文档末尾即可确保它能正常工作。