我已经使用引导模板等模板有一段时间了，当我试图修改或添加更多脚本时，我总是会遇到这两种情况
场景1:在某些模板中，脚本只有在顶部（即头部）时才能工作，但在元素底部时不起作用
<head>
<!--required scripts here e.g.-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
</head>
<body>
<div class="content">
<!--elements that require scripts i.e. forms and button-->
</div>
<footer>
</footer>
</body>
场景2:在某些模板中，脚本只有在底部（即页脚）时才能工作，但放置在元素顶部时不起作用
<head>
</head>
<body>
<div class="content">
<!--elements that require scripts i.e. forms and button-->
</div>
<footer>
<!--required scripts here e.g.-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
</footer>
</body>
我想了解这些场景背后的想法。是什么导致了这种行为？或者应该考虑什么？
脚本的位置表示依赖关系：如果脚本A需要脚本B中的一些值，那么脚本B将被放置在脚本A之上。例如：一些JavaScript需要jQuery，所以您将jQuery放置在任何需要它的脚本之上。
这是因为脚本是从上到下运行的。
一些脚本需要加载DOM，例如，它们对一些HTML元素进行操作，即使用document.getElementById或$("selector")。在这些情况下，HTML元素是脚本所必需的，因此这些元素需要位于需要它们的JavaScript之上，或者换句话说，需要一些HTML元素的JavaScript需要位于这些元素之下。
还有其他选项可以处理此问题，例如使用window.addEventListener("DOMContentLoaded", function(){…})或jQuery的$(document).ready(function(){…})。这些选项添加了事件侦听器，每当事件被激发时，这些侦听器将在之后运行。
另一个更新的替代方案是defer属性。
更多详细信息，请参阅"为什么jQuery或getElementById等DOM方法找不到元素？"？。
有时，脚本也会放在底部，以更快地加载页面的内容，因为脚本必须下载，而内容只在脚本之后加载。您可以使用async属性作为替代。
Javascript一次运行一件事。一般来说，它首先在顶部运行代码。因此，在运行声明变量或函数的代码之前，不能要求它们。例如：
<script> var one = 1 </script>
<script> console.log(one) </script>
将注销1但是：
<script> console.log(one) </script>
<script> var one = 1 </script>
将在未定义的情况下注销。
在您的示例中，我假设代码中断是因为它需要jquery，但jquery是在代码尝试运行后加载的。
JavaScript是一个单线程编程环境。在head标记顶部加载多个脚本时，它下面的其余脚本标记将被阻止，直到加载该脚本标记为止。如果一个脚本标签无法加载，那么其他所有标签都会被卡住。。。直到浏览器为该脚本标记超时。为了解决这个阻塞问题，在过去的几年里，开发人员一直在将脚本标记移到网页的底部。
当一个网站有很多JS文件位于页面顶部时，这个问题就非常明显了；正在从第三方、第四方、第五方到第N方广告供应商服务器加载。当广告供应商的服务器离线时，他们的广告无法再提供了——这种情况经常发生——那么页面上的JS就会出现；等待浏览器超时。这会导致页面在加载时出现卡住。这造成了糟糕的用户体验。
开发人员将脚本标记移动到页面底部的技巧有助于缓解这两个问题。它还使网页加载更快&对两个用户都能更快地使用&搜索机器人。因为搜索引擎机器人关心页面加载时间，所以当网页快速加载时，它们可以给网站带来提振。
因此，尽可能将脚本标记移动到页面底部非常重要。
我在Stack overflow上找到了两个关于这个主题的旧答案。
顶部：当在元素上立即具有JavaScript事件功能更重要时（因此，如果您使用DOM Ready事件加载所有内容，这是错误的位置）
底部：加载内容时更重要
正如@Quentin 6年前所说：你什么时候选择在页面底部而不是顶部加载javascript？
我想补充一些其他的东西，但我认为这一点已经足够清楚了，如果不是，关于这个话题还有另一个答案：
Jquery代码应该放在页眉还是页脚？