<script> 不在 <head> 中吗？答案

【问题标题】：Are <script>'s not in <head> ok?<script> 不在 <head> 中吗？
【发布时间】：2010-11-30 16:26:21
【问题描述】：

这个问题一直困扰着我的好奇，我想我会请你的集体专业知识来回答这个问题。

要详细说明标题，请说我有这个：

alert("外部有一些 JS");

在我的 HTML 文件的 <head></head> 标记之外。我的问题是这样行不行，这样用了多少。

我的直觉告诉我没关系 - 我认为浏览器会在所有 HTML 中查找 <script> 标签并在看到它时对其进行解释，所以它应该没问题，但我并不是那么非常适合浏览器的工作方式。

我在这里寻找一个确定的（或尽可能接近确定的）答案 - 这样做可以吗？

编辑：为了避免我多次发布此内容，我会在这里说一次。非常感谢您提供的所有人员。给大家投票！我将不得不重新训练自己将 JS 放在页面底部 - 现在我想到它，非常明显页面底部的脚本比顶部好得多。感谢大家的帮助。

【问题讨论】：

标签： javascript html

【解决方案1】：

脚本标签的最佳位置是在结束正文标签之前。

<html>
      <head>
      <title>Example</title>
      </head>
      <body>
            Your Content
      <script type="text/javascript" src="yourScriptHere.js"></script>
      <script type="text/javascript">//Inline scripts etc.</script>
      </body>
</html>

也就是说，它们可以在其他地方没有问题，但是您最终希望它们的原因是您希望确保页面在执行之前已加载，并且您也不希望拖延客户端下载进度，使它们等待大脚本。

【讨论】：

我不同意。通过将脚本放在最后，它们仅在页面加载后运行。例如，当那些脚本负责将焦点设置在表单元素上时，那就太糟糕了，因为当人们事先开始输入表单时，脚本会重置焦点，这很烦人。
脚本放置位置的原因有很多。最后我更喜欢它们，因为我希望整个页面都可以用来执行我的脚本。在您的输入字段可用于关注之前，完全有可能让您的脚本加载并执行（如果它位于顶部）。但是，对于延迟的烦恼，我完全同意您的看法，因此 +1：D
这不就是 on-load body 属性的用途吗？
@Wallacoloo 绝对。但是，如果您有一个内联脚本，它完全有可能在浏览器触发 load 事件之前和所有资源实际加载之前执行。就我个人而言，我的偏好是避免使用 html 属性，如 onload、onclick 等，并使用 javascript 事件绑定来分离表示和行为，但坦率地说，这只是为了保持我的代码模块化和易于维护。
@user562374：无论如何，在加载 DOM 之前，您不应该尝试关注某个字段，所以您的观点没有实际意义。

【解决方案2】：

是的，<script> 之外的 <head> 块很好。

事实上，许多人鼓励将它们放在<body> 的末尾。将它们放在</body> 之前，将获取/加载推迟到页面内容之后...以加快渲染速度。

From the W3C HTML4 spec:

SCRIPT 元素将脚本放置在文档中。该元素可以在 HTML 文档的 HEAD 或 BODY 中出现任意次数。

【讨论】：

【解决方案3】：

是的。没关系。事实上，很多时候这是必要的。在许多情况下，您可能有一些对页面并不重要的长时间加载（阅读：大型下载）javascript，因此您希望首先加载页面的其余内容，因此您将 <script> 用于该 javascript <body> 部分的底部。

【讨论】：

【解决方案4】：

文档正文中的脚本将在遇到时执行。如果它是一个函数，那么“执行它”仅仅意味着定义函数，即将它添加到已知函数列表中。但是如果它不是一个函数，如果它是一个独立的语句块，它们会在遇到的地方执行。

例如，如果你写：

<html><head>... whatever ...</head>
<p>Foo
<script>
document.write("bar")
</script>
<p>Plugh
</html>

浏览器会显示：

Foobar
Plugh

这可能是也可能不是你想要的。

【讨论】：