javascript必须在head标签中吗？答案

【问题标题】：Does javascript have to be in the head tags?javascript必须在head标签中吗？
【发布时间】：2010-11-15 20:15:41
【问题描述】：

我相信 javascript 可以出现在任何地方（几乎），但我几乎总是在 <head></head> 之间看到它。我正在使用 jquery，想知道它是否出于某种原因必须在 head 标签中，或者如果我移动它是否会破坏某些东西。谢谢。

编辑：为什么它几乎总是在头标签中？

【问题讨论】：

请注意，如果您在 FireBug 中检查带有 <script> 标记的页面，您会发现它们会自动移动到 <head> 标记。
相信它需要在它所作用的项目之前加载。
将所有脚本定义保存在一个位置似乎是一种好习惯，通常是在加载文档的其余部分之前。不过，这完全是我个人的主观评论。
相反，有些人建议将其放在文档的末尾，以便您的页面首先加载并显示。 Google Analytics 建议这样做。
@dr：这根本不正确，如果你想从脚本中操作一个项目，它必须在 HTML 中的那个项目之后（或者必须在一个就绪的处理程序中）。跨度>

标签： javascript

【解决方案1】：

JavaScript 在文档中的任何位置执行。如果将内联 JavaScript 放在正文中，它将在浏览器到达时执行。如果您使用$(document).ready(...) 执行操作，则定位无关紧要。否则，您可能会发现重要的极端情况。一般来说，没关系。脚本以 head 标记结束，这大多不符合传统。

【讨论】：

我认为将脚本标签放在哪里确实很重要。请参阅 Nate 的帖子 (stackoverflow.com/questions/1213281/…)，了解为什么最好将脚本放在页面下方。
但是为了调用$(document).ready(...)，必须先加载jquery。因此，即使自定义函数本身不是，也需要加载和编译。

【解决方案2】：

当浏览器读取一个脚本标签时，一切都会停止，直到它处理完为止。因此，如果您将脚本标签尽可能地向下移动，您的页面将呈现得更快——最好是在结束正文标签之前。显然总加载时间是一样的。

当然，在包含 jQuery 之前，您必须确保实际上不会调用任何 jQuery 函数。

【讨论】：

【解决方案3】：

基本上，浏览器会停止渲染页面，直到.js 文件完全下载并处理完毕。由于它们在 HTML 到达时逐步呈现页面，因此引用较晚的 .js 文件，用户体验会更好。

所以诀窍是在head 中只包含绝对重要的脚本，然后在页面末尾加载剩余的脚本。

【讨论】：

你能放一个参考链接来异步加载javascript吗？

【解决方案4】：

它可以放在head 或body 标签中。请记住，它会在读取时执行，而不一定在文档完成加载时执行。看看here。

【讨论】：

【解决方案5】：

因为您不希望 JavaScript 与 HTML 混合 - 内容与行为。最好你希望它在一个单独的文件中。
在别处使用 JS 有利有弊 - 例如，它将在不同的时间执行，您可以从位于正文中的 javascript 写入文档。

【讨论】：

【解决方案6】：

不，它可以在任何地方。事实上，有时将它放在文档的底部是个好主意。有关原因，请参阅http://developer.yahoo.com/performance/rules.html#js_bottom。

【讨论】：

This website 声称将脚本放在文档底部存在潜在的权衡/缺点。声称是您网站上的某些元素（例如按钮）在您的 javascript 执行之前可能没有响应。
这应该是公认的解决方案。它现在被认为是一种最佳做法。

【解决方案7】：

实际上，出于性能原因，您几乎总是希望将脚本标签放在页面底部。为什么？您希望首先加载您的页面结构和 CSS，以便用户立即看到该页面。然后，您希望所有行为驱动的代码最后加载。 YSlow 是一个很好的 Firefox 扩展程序，可以显示性能等级。它给你打分的一项是你是否在底部而不是顶部有 javascript。

【讨论】：

【解决方案8】：

没有。 SCRIPT 不仅被归类为head.misc element，而且还被归类为special element，因此在允许inline elements 的任何地方都被允许。所以你可以在任何允许内联元素的地方放置SCRIPT：

<p>foo <script>document.write("bar")</script></p>

事实上，some recommend to put SCRIPT elements at the end of the BODY 就在结束标记之前，以便在加载 JavaScript 之前解析整个文档。那是为了防止 JavaScript 阻塞并行下载。

【讨论】：

【解决方案9】：

请注意您可能对延迟产生的不良影响，具体取决于用户的浏览器以及您将 Javascript 放置在页面中的确切位置 - 请参阅 Steve Souders 的所有内容，包括他的斯坦福讲座，以及他留下的劳动成果，例如here（尽可能将脚本放在页面的底部，等等）。

【讨论】：

【解决方案10】：

在某些情况下，是的，如果脚本位于错误的位置，它可能无法运行。一些 JavaScript 需要在特定的 HTML 元素之后执行，其他的需要正好在您希望脚本输出显示的位置，其他的应该在文档的头部。这实际上取决于代码的编写方式。如果你不确定，你应该在 window.load 或 DOMready 上执行你的代码：http://www.javascriptkit.com/dhtmltutors/domready.shtml

【讨论】：

【解决方案11】：

这些天，JS 变化如此之快，每周都会出现新的框架，每个框架都被其拥护者声称是“蜜蜂的膝盖”。

Gumbo 说脚本标签可以在任何支持内联元素的地方引用是正确的，但是加载外部 JS 文件或在标签中包含 JS 代码的选择是根据具体情况单独做出的决定.

是的，浏览器在解析时会停止加载 JS，因此，您需要考虑这将如何影响页面加载速度和功能。

截至 2015 年年中（流行的答案是 2009 年 7 月），将页面加载速度优先考虑移动设备需要对移动设备/蜂窝基站的两个请求限制，在 3G 下为您提供 28k（2x 14kb（是））有效载荷。您需要考虑 28k 的“绘画到屏幕”（Google 将其命名）。这应该为用户提供足够的页面内容/交互性，以确保他们在正确的页面或正确的轨道上。缩小的 Jquery 目前是 87.6lkb，所以“只是不会切芥末！”

这就是为什么大多数移动页面会在加载任何内容之前等待几秒钟，即使在 4G 上也是如此！不允许那样。页面速度为王，用户在加载 JQuery 文件之前点击了后退按钮。在 3G+ 下，一个 28k 的有效负载将在

不要根据 SO 上 7 年前的帖子来构建您的页面（即使它没有错，只是过时了）。在您尝试加载 6 个 JS 框架，这些框架为您的页面实现奢华的视觉功能和广泛的数据绑定之前，请确定每段代码的需要位置并确保用户可以使用页面的最重要方面。

顺便说一句，Google 更喜欢将 JS 推到底部，因为 Google 分析代码需要在最后加载。

编码前三思！

【讨论】：

我不确定你要我做什么。也许是一个例子？还是设计图？
johnny，简而言之，加载外部或放置内联 javascript 需要考虑两个方面，即何时需要代码以及它如何影响页面加载速度。这两个因素受移动网络用户的影响很大。我的另一点是关于了解如何加载不需要立即加载的代码会降低页面加载速度，而不必要地引用阻塞代码。
在此处进一步阅读，developers.google.com/speed/docs/insights/BlockingJS 没有单一的答案，而是评估代码并根据所有因素做出决定的问题。