logo标签列表

JavaScript必须放在<head>标签中吗？

javascript
69

我相信JavaScript几乎可以出现在任何地方，但我几乎总是看到它出现在<head></head>之间。我正在使用jQuery，并想知道它是否必须出现在头部标签中，或者如果我移动它会破坏什么。谢谢。

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

1
只是提醒一下，如果你在 FireBug 中检查带有 <script> 标签的页面，你会发现它们会自动移动到 <head> 标签中。 - Blindy
需要先加载它所作用的项目的信念。 - dr.
把所有的脚本定义放在一个地方似乎是一个很好的做法，通常是在文档的其余部分加载之前。不过这只是我的主观看法。 - MattC
14
相反，有些人建议将其放在文档的末尾，这样你的页面就会首先加载和显示。Google Analytics 也推荐这么做。 - mpen
3
完全不正确，如果你想从脚本中操作一个元素，它必须在 HTML 中该元素之后（或者必须在 onready 处理程序中）。 - Ruan Mendes
11个回答
49
这个网站声称将脚本放在文档底部可能存在潜在的权衡/缺陷。该声明是指您网站上的某些元素（例如按钮）可能在JavaScript执行之前无响应。 - Kevin Wheeler
这应该是被接受的解决方案。现在它被认为是最佳实践。 - Fergus
40

JavaScript会在文档中找到它的位置并执行。如果你将内联JavaScript放在中，当浏览器到达时它将会被执行。如果你使用$(document).ready(...)来执行操作，则位置不应该有影响。否则，可能会出现一些特殊情况需要注意。通常情况下，这并不重要。脚本最终主要出于传统原因而放置在标签中。

5
我认为放置脚本标签的位置是有影响的。请参考Nate的文章（https://dev59.com/MHM_5IYBdhLWcg3w02z8#1213310），了解为什么将脚本放在页面底部更好。 - Alexander Bird
3
为了调用 $(document).ready(...)，必须先加载 jQuery。因此，即使自定义函数本身没有被加载和编译，jQuery 也需要被加载和编译。 - Dogweather
17
基本上，浏览器在完全下载和处理 .js 文件之前停止呈现页面。由于它们逐步呈现随着 HTML 到达的页面，因此引用较晚的 .js 文件将带来更好的用户体验。
因此，关键性脚本应仅包括在 head 中，并将剩余脚本加载至页面末尾。
1
你能否提供一个引用链接来异步加载JavaScript？ - Jayapal Chandran
9
JS最近变化很快，每周都有新的框架出现，而且每个框架都声称自己是“最棒的”。Gumbo说得对，脚本标签可以在支持内联元素的任何地方引用，但是选择加载外部JS文件还是将JS代码包含在
我不确定你让我做什么。可以举个例子吗？或者设计图表？ - johnny
Johnny，简而言之，加载外部或内联JavaScript需要考虑两个因素：代码何时需要以及它如何影响页面加载速度。这两个因素受移动网络用户的影响很大。我的另一个观点是关于理解如何加载不需要立即使用的代码会不必要地降低页面加载速度，这被称为阻塞代码。 - Jools
进一步阅读请访问此链接：https://developers.google.com/speed/docs/insights/BlockingJS。没有一个确定的答案，这是一个根据代码评估并基于所有因素做出决策的问题。 - Jools
我理解你对帖子中的侮辱性语气有所依恋，但是撤销整个编辑也将所有的拼写和语法修正都移除了。你是否愿意接受一篇写得很好的发泄？ - Abandoned Cart
我知道你对那篇帖子中的侮辱性语气感到不满，但是撤销整个编辑也意味着所有的拼写和语法修正都被删除了。你愿意接受一篇写得很好的抱怨吗？ - undefined
9
当浏览器读取脚本标签并处理它之前，所有内容都会停止。因此，如果您将脚本标签尽可能地下移 - 最好放在结束body标签之前 - 您的页面将更快地呈现。显然，总加载时间将保持不变。
当然，在包含jQuery之前，您必须确保不实际调用任何jQuery函数。
5
2
实际上，出于性能考虑，你几乎总是希望将脚本标签放在页面底部。为什么？你希望页面结构和CSS首先加载，以便用户立即看到页面。然后，你想要所有行为驱动的代码最后加载。 YSlow是一个很好的Firefox扩展程序，它将为你显示性能评分。其中一个评分项是你是否将JavaScript放在底部而不是顶部。
2
只需小心用户的浏览器和您在页面中放置JavaScript的确切位置可能产生的延迟影响，参见Steve Souders所说的几乎所有内容，包括他在斯坦福大学讲座的视频和他留下的劳动成果，例如此处（尽可能将脚本放置在页面底部等等）。
1
由于您不想将JavaScript与带有行为的HTML内容混合在一起。最好将它放在单独的文件中。
JS放在其他地方有优点和缺点-例如，它将在不同的时间执行，并且可以从位于body中的javascript向文档编写内容。
0
它可以放在或标签中。请记住，它将在读取时执行，而不一定是在文档完成加载时执行。请看这里。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接