Question

我一直在使用bootstrap模板等模板，当我尝试修改或添加更多脚本时，我总是遇到这两个场景

SCENARIO 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>

SCENARIO 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>

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

Answer 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属性。

Why does jQuery or a DOM method such as getElementById not find the element?的更多详情。

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

Answer 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。

Answer 3

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

当网站上有很多位于页面顶部的JS文件时，问题就显而易见了。正在从第3个，第4个，第5个到第N个广告供应商服务器加载。当广告供应商的服务器脱机时，他们的广告不再被提供 - 这种情况经常发生 - 那么页面上的JS就是＆amp;等待浏览器超时。这会导致页面在加载时看起来卡住。这会造成糟糕的用户体验。

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

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

Answer 4

我在Stack溢出时发现了关于这个主题的两个旧答案。

顶部：在元素上立即使用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?

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

4 个答案: