提问人：nickf 提问时间：10/13/2008 最后编辑：Sebastian Simonnickf 更新时间：6/5/2020 访问量：144163
在 HTML 文件中放置 JavaScript 的什么位置？
Where to place JavaScript in an HTML file?
问：
假设我有一个相当大的 JavaScript 文件，压缩到大约 100kb 左右。通过文件，我的意思是它是一个外部文件，可以通过 链接，而不是粘贴到 HTML 本身中。<script src="...">
把它放在 HTML 中的最佳位置在哪里？
<html>
<head>
<!-- here? -->
<link rel="stylesheet" href="stylez.css" type="text/css" />
<!-- here? -->
</head>
<body>
<!-- here? -->
<p>All the page content ...</p>
<!-- or here? -->
</body>
</html>
每个选项之间会有什么功能差异吗？
答：
78赞
Levi Rosol
10/13/2008
#1
最好的地方就在你需要它之前，而不是更早。
此外，根据用户的物理位置，使用像 Amazon 的 S3 服务这样的服务可以帮助用户从物理上比您的服务器更靠近他们的服务器下载它。
你的js脚本是像jQuery或原型一样常用的库吗？如果是这样，有许多公司，如谷歌和雅虎，都有工具可以在分布式网络上为你提供这些文件。
182赞
Walter Rumsby
10/13/2008
#2
Yahoo！ 卓越性能团队建议将脚本放在页面底部，因为浏览器下载组件的方式。
当然，Levi的评论“就在你需要它之前，而不是更早”确实是正确的答案，即“视情况而定”。
评论
4赞
BryanH
7/9/2009
例如，如果你要做一堆jQuery的东西，你需要在实际尝试使用它之前加载库。
63赞
BryanH
7/9/2009
另外，Yahoo EPT 之所以建议将 JS 放在底部，是因为浏览器必须在 JS 加载然后执行时进入单线程模式。如果脚本在头部或内容中间，浏览器在处理 JS 时将“暂停”。通过将 JS 放在底部，内容将被加载并通常可见，因此用户可以在浏览器仍在处理 JS 时开始阅读它。
1赞
Thang Pham
5/6/2013
你好。我们是把这样的代码也放在页面的底部，还是必须在里面？$(function () {...})<head>
8赞
Mr_Green
8/8/2013
我希望这里提到的“页面底部”不是超出？</body>
1赞
LinuxDisciple
9/23/2016
现代浏览器还可以读取“defer”属性。您可以在不在 <body>底部的脚本标签上设置 defer=“defer”，当浏览器看到这些标签时，它将首先完成加载 html 的其余部分，然后返回并解释脚本标签的内容。如果您使用的是某种无法完全控制页面的框架，这将很有帮助。深入研究这篇文章并注意到它是一个动态文档，因此某些信息已过时：stackoverflow.com/questions/5250412/......
4赞
bart
10/13/2008
#3
使用 100k 的 Javascript，您永远不应该将其放入文件中。使用外部脚本 Javascript 文件。在地狱中，你不可能只在一个 HTML 页面中使用这么多代码。您可能正在询问应该在哪里加载 Javascript 文件，为此您已经收到了令人满意的答案。
但我想指出的是，通常，现代浏览器接受 gzipped Javascript 文件！只需将文件压缩到 ，并在属性中指向该文件即可。它不能在本地文件系统上运行，你需要一个 Web 服务器才能工作。但是，传输字节的节省可能是巨大的。x.jsx.js.gzsrc
我已经在 Firefox 3、MSIE 7、Opera 9 和 Google Chrome 中成功测试了它。它显然在 Safari 3 中无法以这种方式工作。
有关更多信息，请参阅这篇博文，以及另一个非常古老的页面，该页面仍然很有用，因为它指出 Web 服务器可以检测浏览器是否可以接受 gzip 压缩的 Javascript。如果您的服务器端可以动态选择发送 gzip 压缩或纯文本，则可以使该页面在所有 Web 浏览器中可用。
评论
8赞
Mark Amery
6/23/2013
你误解了OP的问题。他问在HTML中放置脚本标签的什么位置。他已经在使用外部文件，而不是内联脚本。诚然，在他09年4月编辑这个问题之前，这一点还不太清楚。也许删除这个答案？
0赞
WynandB
11/22/2013
@Leandro我想这是因为人们并不总是牢记实际问题，但仍然认为这样的答案很有用。尽管如此，这个答案是有用的，但不一定相关。如果投票工具提示包含更明确的措辞，例如“此答案有用且相关”，效果可能会更好。
1赞
Gert van den Berg
2/5/2015
在 gzip 压缩的 Javascript 上：您也可以配置您的 Web 服务器来压缩它......（或者使用类似 nginx 的 gzip_static 模块/选项）（以及用于其他客户的 gunzip）这至少应该发送正确的内容类型标头，编码标记为 gzip，这可能会带来更好的浏览器支持
1赞
GustyWind
10/13/2008
#4
答案是取决于你如何使用javascript的对象。如前所述，在页脚而不是页眉处加载 javascript 文件肯定会提高性能，但应注意使用的对象初始化晚于在页脚加载的时间。另一种方法是加载放置在文件夹中的“js”文件 这将可用于所有文件。
0赞
Berserk
10/13/2008
#5
就像其他人所说的那样，它很可能应该放在外部文件中。我更喜欢在 <head /> 的末尾包含此类文件。这种方法对人类比机器更友好，但这样我总是知道 JS 在哪里。在其他任何地方都包含脚本文件是不可读的（恕我直言）。
我真的需要挤出每一毫秒，那么你可能应该按照雅虎说的去做。
3赞
Sam Hasler
10/16/2008
#6
使用 cuzillion，您可以使用不同的方法测试不同放置的脚本标签对页面加载的影响：内联、外部、“HTML 标签”、“document.write”、“JS DOM 元素”、“iframe”和“XHR eval”。有关差异的解释，请参阅帮助。它还可以测试样式表、图像和 iframe。
4赞
Matthias Wandel
10/16/2008
#7
将 javascript 放在顶部似乎更整洁，但从功能上讲，最好遵循 HTML。这样，您的 javascript 就不会运行并尝试在加载 HTML 元素之前引用它们。这种问题通常只有在您通过实际的互联网连接加载页面时才会变得明显，尤其是速度较慢的页面。
您也可以尝试通过从其他 javascript 代码添加标头元素来动态加载 javascript，尽管这只有在您不是一直使用所有代码时才有意义。
70赞
martynas
5/5/2014
#8
根据经验，放置标签的最佳位置是页面底部，就在标签之前。像这样的东西：<script></body>
<html>
<head>
<title>My awesome page</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="...">
<link rel="stylesheet" type="text/css" href="...">
<link rel="stylesheet" type="text/css" href="...">
<link rel="stylesheet" type="text/css" href="...">
</head>
<body>
<!-- Content content content -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="..."></script>
<script type="text/javascript" src="..."></script>
<script type="text/javascript" src="..."></script>
</body>
</html>
为什么？
脚本引起的问题是它们会阻止并行下载。HTTP/1.1 规范建议浏览器为每个主机名并行下载不超过两个组件。如果从多个主机名提供映像，则可以并行进行两次以上的下载。但是，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。更多。。。
CSS的
有点跑题了，但是......将样式表放在顶部。
在研究 Yahoo！ 的性能时，我们发现将样式表移动到文档 HEAD 会使页面看起来加载速度更快。这是因为将样式表放在 HEAD 中允许页面逐步呈现。更多。。。
延伸阅读
雅虎发布了一个非常酷的指南，列出了加快网站速度的最佳实践。绝对值得一读： https://developer.yahoo.com/performance/rules.html
评论
2赞
Quentin
8/1/2016
“脚本引起的问题是它们阻止了并行下载。” — 这不再是真的：w3.org/TR/html5/scripting-1.html#attr-script-async
0赞
Timothy Trousdale
11/19/2015
#9
你的 javascript 链接可以放在头部或正文标签的末尾，确实可以通过将链接放在正文标签的末尾来提高性能，但除非性能有问题，否则将它们放在头部更适合人们阅读，并且您知道链接的位置并且可以更轻松地引用它们。
0赞
Ludus H
7/26/2016
#10
我想说的是，这取决于您计划使用 Javascript 代码实现什么：
- 如果您打算插入外部 JS 脚本，那么最好 位置位于页面的头部
- 如果您计划在智能手机上使用页面，那么页面底部， 就在标记之前。
- 但是，如果您打算将 HTML 和 JS 组合在一起（动态地 创建并填充 HTML 表格，例如）然后您必须将 它在哪里你需要它。
评论
0赞
Ludus H
7/27/2016
我说的应该减！？吉兹语。
0赞
Quentin
8/1/2016
外部与把剧本放在脑袋里有什么关系？为什么页面底部是放置专门用于智能手机的脚本的好地方？您关于从 JS 动态生成 HTML 的陈述仅在您使用 时才是正确的，您可能不应该这样做。document.write
0赞
Ludus H
8/2/2016
你“假设”了我的想法，并且由于我的答案得到了减分？你认为你的假设可能比我的解释更好，对吧？我只是打算做一个简短的解释，如果有人无法理解，那么他会要求更多信息。在我的评论中，我建议将 JS 放入智能手机和平板电脑的页面末尾，就在正文结束之前，因为整个页面的加载速度更快，因为浏览器不需要切换到“单线程”模式，页面内容将开始出现在屏幕上......但你可能知道这一点。
1赞
José Salgado
2/27/2019
#11
脚本应包含在 body 标记的末尾，因为这样 HTML 将由浏览器解析并在加载脚本之前显示。
2赞
user10314103
6/5/2020
#12
问题的答案取决于。在这种情况下有 2 种方案，您需要根据适当的方案做出选择。
方案 1 - 关键脚本/必须需要的脚本
如果您使用的脚本对于加载网站很重要，建议将其放置在 HTML 文档的顶部，即 .一些示例包括 - 应用程序代码、引导程序、字体等。<head>
方案 2 - 不太重要的/分析脚本
还有一些使用的脚本不会影响网站的视图。建议在加载所有重要段后加载此类脚本。答案将是文档的底部，即结束标签之前的底部。一些例子包括 - 谷歌分析、hotjar 等。<body>
奖金 - 异步/延迟
您还可以告诉浏览器，脚本加载可以与其他脚本同时完成，并且可以根据浏览器的选择使用脚本代码中的 defer / async 参数进行加载。
例如。<script async src="script.js"></script>
评论