为什么javascript在页面底部或有时从页面顶部运行答案

【问题标题】：why javascript runs when at bottom of page or sometimes from top of page为什么javascript在页面底部或有时从页面顶部运行
【发布时间】：2016-07-13 17:08:52
【问题描述】：

我一直在使用诸如引导模板之类的模板，当我尝试修改或添加更多脚本时，我总是遇到这两种情况

场景 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>

我想了解这些场景背后的想法。是什么导致了这种行为？或者应该考虑什么？

【问题讨论】：

Where is the best place to put <script> tags in HTML markup?的可能重复
@8protons 我已经看到了参考资料，但我的问题不是要求放置脚本标签的最佳位置。我只是想了解为什么某些脚本不起作用
@8protons 这不是那个问题的真正副本，但那个链接是一个很好的阅读！感谢您的链接！
@OmariOmosa 我的误会；对不起！

标签： javascript jquery html

【解决方案1】：

脚本的位置表示依赖关系：如果脚本 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 属性。

有时，脚本也会放在底部以更快地加载页面内容，因为必须下载脚本并且内容仅在脚本之后加载。您可以使用 async 属性作为替代。

【讨论】：

【解决方案2】：

Javascript 一次运行一件事。通常它首先在顶部运行代码。因此，在声明它们的代码运行之前，您不能要求变量或函数。例如：

<script> var one = 1 </script>
<script> console.log(one) </script>

将注销 1：

<script> console.log(one) </script>
<script> var one = 1 </script>

将注销未定义。

在您的示例中，我假设代码中断是因为它需要 jquery，但在代码尝试运行后加载了 jquery。

【讨论】：

【解决方案3】：

JavaScript 是单线程编程环境。当在 head 标签的顶部加载多个脚本时，它下面的其余脚本标签将被阻止，直到该脚本标签加载。如果一个脚本标签无法加载，那么其余的都会卡住……直到浏览器对该脚本标签超时。为了解决这个阻塞问题，开发人员在过去几年中一直将脚本标签移到网页底部。

当网站有很多 JS 文件位于页面顶部并且从第 3、4、5 到第 N 方广告供应商服务器加载时，这个问题非常明显。当广告供应商的服务器离线时，他们的广告无法再提供 - 这种情况经常发生 - 然后页面上的 JS 会等待浏览器超时。这会导致页面在加载时似乎卡住。这会造成糟糕的用户体验。

将脚本标签移动到页面底部的开发人员技巧有助于缓解这两个问题。它还使网页加载速度更快，并且可供用户和搜索机器人更快地使用。由于搜索引擎机器人关心页面加载时间，因此它们可以在网页快速加载时为网站提供动力。

因此，尽可能将脚本标签移至页面底部非常重要。

【讨论】：

问题不在于页面加载速度更快。问题是元素不起作用，例如由 javascript 激活的按钮。其他人在脚本位于它们顶部时工作，而其他人在它们位于元素底部时工作
部分 jQuery 代码可以在没有包装页面加载功能的情况下编写。所以它正在寻找 $('.content')，不包括 $(function() { $('.content') });后一个代码示例将等待整个 DOM 加载，然后在其上运行 jQuery。如果您要在 jQuery 库中添加调试器，当
标签还不能供 jQuery 使用。

【解决方案4】：

我在 Stack Overflow 上找到了关于这个主题的两个旧答案。

顶部：当立即在元素上设置 JavaScript 事件功能时更为重要（因此，如果您使用 DOM Ready 事件来加载所有内容，这是错误的地方）

底部：加载内容时更重要

正如@Quentin 6 年前所说：When do you choose to load your javascript at the bottom of the page instead of the top?

我会添加一些其他内容，但我认为一个已经足够清楚了，如果没有，关于这个主题还有另一个答案：

Should Jquery code go in header or footer?

【讨论】：