为什么javascript在页面底部或有时从页面顶部运行
我使用引导程序模板之类的模板已经有一段时间了，当我尝试修改或添加更多脚本时，我总是遇到这两种情况
场景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>我真的想要理解这些场景背后的想法。是什么导致了这种行为？或者应该考虑什么？
回答 4
Stack Overflow用户
发布于 2016-03-26 05:58:01
脚本的位置表示依赖关系:如果脚本A需要脚本B中的某些值，则脚本B放在脚本A的上方。例如:某些JavaScript需要jQuery，因此您将jQuery放在任何需要它的脚本之上。
这是因为脚本是从上到下运行的。
一些脚本需要加载DOM，例如，它们操作一些超文本标记语言元素，即使用document.getElementById或$("selector")。在这些情况下，脚本需要HTML元素，因此这些元素需要放在需要它们的JavaScript之上，或者换句话说，需要一些HTML元素的JavaScript需要放在这些元素的下面。
还有其他选项可以处理此问题，例如使用window.addEventListener("DOMContentLoaded", function(){…})或jQuery的$(document).ready(function(){…})。这些选项添加稍后在触发事件时运行的事件侦听器。
另一个较新的替代方法是defer属性。
更多细节请访问Why does jQuery or a DOM method such as getElementById not find the element?。
有时，脚本也放在底部，以便更快地加载页面内容，因为必须下载脚本，并且只在脚本之后加载内容。您可以使用async属性作为替代。
Stack Overflow用户
发布于 2016-03-26 05:50:51
Javascript一次只运行一件事。通常，它首先在顶部运行代码。因此，在运行声明变量或函数的代码之前，不能请求它们。例如：
<script> var one = 1 </script>
<script> console.log(one) </script>将注销1，但是：
<script> console.log(one) </script>
<script> var one = 1 </script>将注销未定义的。
在您的示例中，我假设代码中断是因为它需要jquery，但jquery是在代码尝试运行后加载的。
Stack Overflow用户
发布于 2016-03-26 06:11:59
JavaScript是一个单线程编程环境。在head标签顶部加载多个脚本时，在加载该脚本标签之前，将阻止该脚本标签下的其余脚本标签。如果一个脚本标记无法加载，那么所有其他脚本标记都会被卡住……直到浏览器对该脚本标记超时。为了解决这个阻塞问题，开发人员在过去几年中一直在将脚本标记移动到网页的底部。
当一个站点在页面顶部有很多JS文件时，这个问题非常明显，这些文件是从第三方、第四方、第五方到第N方广告供应商的服务器加载的。当广告供应商的服务器离线时，他们的广告就不能再提供了--这种情况经常发生--然后页面上的JS就会停下来，等待浏览器超时。这会导致页面在加载时被卡住。这造成了糟糕的用户体验。
开发人员将脚本标记移动到页面底部的技巧，有助于缓解这两个问题。它还使得网页加载更快，对用户和搜索机器人来说都更快。因为搜索引擎机器人关心页面加载时间，所以当他们的网页快速加载时，他们可以给网站带来提振。
因此，尽可能地将脚本标记移动到页面的底部是很重要的。
https://stackoverflow.com/questions/36228495
复制相似问题