将 JavaScript 放在 HTML 文件中的啥位置？

Posted

技术标签:

【中文标题】将 JavaScript 放在 HTML 文件中的啥位置？【英文标题】：Where to place JavaScript in an HTML file?将 JavaScript 放在 HTML 文件中的什么位置？ 【发布时间】：2010-09-16 20:06:28 【问题描述】：

假设我有一个相当大的 javascript 文件，压缩到大约 100kb 左右。我所说的文件是指通过<script src="..."> 链接的外部文件，而不是粘贴到html 本身中。

将它放在 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>

每个选项之间会有任何功能差异吗？

【问题讨论】：

Where should I put <script> tags in HTML markup?的可能重复 【参考方案1】：

雅虎！ Exceptional Performance 团队推荐placing scripts at the bottom of your page，因为浏览器下载组件的方式。

当然，Levi 的评论“就在你需要它之​​前，不早点”确实是正确的答案，即“这取决于”。

【讨论】：

例如，如果你要做一堆 jQuery 的东西，你需要在实际尝试使用它之前加载库。 另外，Yahoo EPT 之所以推荐将 JS 放在底部，是因为浏览器必须在 JS 加载并执行时进入单线程模式。如果脚本在头部或内容中间，浏览器在处理 JS 时会“暂停”。通过将 JS 放在底部，内容将被加载并且通常可见，因此用户可以在浏览器仍在处理 JS 时开始阅读它。 嗨。我们是否也将$(function () ...) 这样的代码放在页面底部，还是必须在&lt;head&gt; 内？ 我希望这里提到的 "bottom of your page" 不会超出&lt;/body&gt;? 现代浏览器也可以读取“defer”属性。您可以在 底部的脚本标签上设置 defer="defer"，当浏览器看到这些标签时，它将首先完成加载 html 的其余部分，然后返回并解释脚本标签。如果您正在使用某种无法完全控制页面的框架，这将很有帮助。深入研究这篇文章并注意它是一个动态文档，因此其中一些信息已经过时：***.com/questions/5250412/…【参考方案2】：

它的最佳位置是在您需要它之前，而不是更早。

此外，根据您用户的实际位置，使用像 Amazon 的 S3 服务这样的服务可能会帮助用户从物理上比您的服务器更靠近他们的服务器下载它。

你的 js 脚本是 jQuery 还是原型之类的常用库？如果是这样，有许多公司，例如 Google 和 Yahoo，拥有在分布式网络上为您提供这些文件的工具。

【讨论】：

【参考方案3】：

根据经验，放置&lt;script&gt; 标签的最佳位置是页面底部，就在&lt;/body&gt; 标签之前。像这样的：

<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 规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。但是，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。 More...

CSS

有点离题，但是...将样式表放在顶部。

在 Yahoo! 研究性能时，我们发现将样式表移动到文档 HEAD 会使页面加载速度更快。这是因为将样式表放在 HEAD 中可以让页面逐步呈现。 More...

进一步阅读

雅虎发布了一个非常酷的指南，其中列出了加快网站速度的最佳做法。绝对值得一读： https://developer.yahoo.com/performance/rules.html

【讨论】：

"脚本导致的问题是它们阻止并行下载。" — 这不再是真的：w3.org/TR/html5/scripting-1.html#attr-script-async【参考方案4】：

对于 100k 的 Javascript，您永远不应该将其放入文件中。使用外部脚本 Javascript 文件。绝对不可能只在一个 HTML 页面中使用这么多的代码。您可能会问应该在哪里加载 Javascript 文件，因为您已经收到了满意的答案。

但我想指出，现代浏览器通常接受 gzipped Javascript 文件！只需将x.js 文件gzip 到x.js.gz，并在src 属性中指向它。它不适用于本地文件系统，您需要一个网络服务器才能使其工作。但是传输字节数的节省可能是巨大的。

我已在 Firefox 3、MSIE 7、Opera 9 和 Google Chrome 中成功测试过它。它显然在 Safari 3 中无法以这种方式工作。

有关更多信息，请参阅this blog post 和另一个very ancient page，尽管如此，它还是很有用的，因为它指出网络服务器可以检测浏览器是否可以接受 gzip 压缩的 Javascript。如果您的服务器端可以动态选择发送 gzipped 或纯文本，您可以使页面在所有 Web 浏览器中可用。

【讨论】：

您误解了 OP 的问题。他在问在 HTML 中的何处放置脚本标记。他已经在使用外部文件，而不是内联脚本。诚然，在他于 09 年 4 月编辑该问题之前，这一点不太清楚。也许删除这个答案？ @Leandro 我猜这是因为人们并不总是将实际问题牢记在心，但仍然认为诸如此类的答案很有用。尽管如此，这个答案是有用但不一定相关。如果投票工具提示包含更明确的措辞，例如，它可能会更好。 '这个答案有用且相关'。 在 gzipped Javascript 上：你也可以配置你的网络服务器来压缩它......（或者使用类似 nginx 的 gzip_static 模块/选项）（以及其他客户端的 gunzip）至少应该发送正确的内容类型标头，编码标记为 gzip，可能会导致更好的浏览器支持【参考方案5】：

将 javascript 放在顶部看起来更整洁，但从功能上讲，最好放在 HTML 之后。这样，您的 javascript 将不会在加载之前运行并尝试引用 HTML 元素。这类问题通常只有在您通过实际的 Internet 连接加载页面时才会显现出来，尤其是在速度较慢的情况下。

您也可以尝试通过添加来自其他 javascript 代码的标头元素来动态加载 javascript，尽管这仅在您不一直使用所有代码时才有意义。

【讨论】：

【参考方案6】：

使用cuzillion，您可以使用不同的方法测试脚本标签的不同位置对页面加载的影响：内联、外部、“HTML 标签”、“document.write”、“JS DOM 元素”、“iframe”、和“XHR 评估”。有关差异的解释，请参阅help。它还可以测试样式表、图像和 iframe。

【讨论】：

【参考方案7】：

答案取决于您如何使用 javascript 的对象。正如已经指出的那样，在页脚而不是页眉处加载 javascript 文件肯定会提高性能，但应注意所使用的对象的初始化时间要晚于它们在页脚处加载。另一种方法是加载放置在文件夹中的“js”文件 这将适用于所有文件。

【讨论】：

【参考方案8】：

脚本应该包含在 body 标记的末尾，因为这样 HTML 将被浏览器解析并在脚本加载之前显示。

【讨论】：

【参考方案9】：

就像其他人所说的那样，它很可能应该放在外部文件中。我更喜欢在

的末尾包含此类文件。这种方法比机器友好更人性化，但这样我总是知道 JS 在哪里。在其他任何地方包含脚本文件都不那么可读（恕我直言）。

我真的需要挤出最后一毫秒然后你可能应该按照雅虎所说的去做。

【参考方案10】：

您的 javascript 链接可以位于正文标记的头部或末尾，将链接放在正文标记的末尾确实可以提高性能，但除非性能有问题，否则将它们放在head 更易于人们阅读，并且您知道链接的位置并可以更轻松地引用它们。

【讨论】：

【参考方案11】：

我会说这实际上取决于你打算用 Javascript 代码实现什么：

如果您打算在外部插入 JS 脚本，那么最好 位置在页面头部 如果您打算在智能手机上使用页面，那么页面底部， 就在标签之前。 但是，如果您打算组合 HTML 和 JS（动态 例如，创建并填充 HTML 表），那么您必须将 放在你需要的地方。

【讨论】：

我说的应该减去！？天哪。 外部环境与将脚本放在首位有什么关系？为什么页面底部是专门放置智能手机脚本的好地方？仅当您使用 document.write 时，您关于从 JS 动态生成 HTML 的声明才是正确的，而您可能不应该这样做。 你“假设”了我的想法，并且因为我的答案得到了减分？您可能认为您的假设比我的解释更好，对吧？我只是打算做一个简短的解释，如果有人无法理解，那么他会要求更多信息。在我的评论中，我建议将 JS 放在智能手机和平板电脑的页面末尾，就在正文结束之前，因为整个页面的加载速度更快，因为浏览器不需要切换到“单线程”模式，页面内容将开始出现在屏幕上......但你可能知道这一点。【参考方案12】：

问题的答案取决于。这种情况有两种情况，您需要根据自己的情况做出选择。

场景 1 - 关键脚本/必须的脚本

如果您使用的脚本对加载网站很重要，建议将其放在 HTML 文档的顶部，即&lt;head&gt;。一些示例包括 - 应用程序代码、引导程序、字体等。

场景 2 - 不太重要/分析脚本

还使用了不影响网站视图的脚本。建议在加载所有重要段后加载此类脚本。答案将是文档的底部，即结束标记之前的 &lt;body&gt; 底部。一些示例包括 - Google 分析、hotjar 等。

奖励 - 异步/延迟

您还可以告诉浏览器脚本加载可以与其他浏览器同时完成，并且可以使用脚本代码中的 defer / async 参数根据浏览器的选择进行加载。

例如。 &lt;script async src="script.js"&gt;&lt;/script&gt;

【讨论】：

以上是关于将 JavaScript 放在 HTML 文件中的啥位置？的主要内容，如果未能解决你的问题，请参考以下文章

将 HTML 文件中的外部 javascript 文件从 android assets 文件夹加载到 WebView

使用 Tomcat 将文本文件放在 Eclipse 动态 Web 项目中的啥位置？

js文件放在哪里好?

我应该将 <script> 标签放在 HTML 标记中的啥位置？

javascript引入外部js文件

css 动态背景 - 将Javascript放在页脚和CSS中。确保所有图像文件都以Photoshop文档中的名称命名