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

IT技术 javascript html optimization

2021-02-04 20:14:43

假设我有一个相当大的 JavaScript 文件，压缩到大约 100kb 左右。通过文件，我的意思是它是一个外部文件，它将通过 via 链接<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>

每个选项之间是否有任何功能差异？

6个回答

雅虎！由于浏览器下载组件的方式，卓越性能团队建议将脚本放在页面底部。

当然，Levi 的评论“就在您需要它之前，不要很快”确实是正确的答案，即“视情况而定”。

我希望这里提到的“页面底部”不会超出</body>？

2021-03-22 20:14:43

另外，Yahoo EPT 推荐将 JS 放在底部的原因是浏览器必须在 JS 加载然后执行时进入单线程模式。如果脚本在内容的头部或中间，浏览器在处理 JS 时会“暂停”。通过将 JS 放在底部，内容将被加载并且通常可见，这样用户就可以在浏览器仍在处理 JS 的同时开始阅读它。

2021-03-23 20:14:43

你好。我们是将这样的代码也放在$(function () {...})页面底部，还是必须在里面<head>？

2021-03-26 20:14:43

例如，如果您打算做一堆 jQuery 东西，您需要在实际尝试使用它之前加载该库。

2021-03-30 20:14:43

现代浏览器也可以读取“defer”属性。您可以在不在 <body> 底部的脚本标签上设置 defer="defer"，当浏览器看到这些标签时，它会首先完成其余 html 的加载，然后返回并解释其中的内容脚本标签。如果您使用某种无法完全控制页面的框架，这会很有帮助。深入研究这篇文章并注意它是一个活文档，所以一些信息已经过时：stackoverflow.com/questions/5250412/...

2021-04-03 20:14:43

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

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

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

根据经验，放置<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

“脚本引起的问题是它们阻止了并行下载。” — 这不再正确：w3.org/TR/html5/scripting-1.html#attr-script-async

2021-03-20 20:14:43

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

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

我已经在 Firefox 3、MSIE 7、Opera 9 和 Google Chrome 中成功测试了它。它显然在 Safari 3 中不起作用。

有关更多信息，请参阅此博客文章和另一个非常古老的页面，但它仍然很有用，因为它指出网络服务器可以检测浏览器是否可以接受 gzipped Javascript。如果您的服务器端可以动态选择发送 gzip 或纯文本，您就可以使该页面在所有 Web 浏览器中都可用。

@Leandro 我想这是因为人们并不总是牢记实际问题，但仍然认为这样的答案很有用。然而，这个答案是有用的，但不一定相关。如果投票工具提示包含更明确的措辞，则可能会更好，例如“此答案有用且相关”。

2021-03-14 20:14:43

您误解了 OP 的问题。他问在 HTML 中的哪个位置放置脚本标记。他已经在使用外部文件，而不是内联脚本。诚然，这在他于 09 年 4 月编辑问题之前不太清楚。也许删除这个答案？

2021-03-22 20:14:43

在 gzip Javascript 上：您也可以配置您的网络服务器来压缩它......（或使用类似 nginx 的 gzip_static module/选项）（以及用于其他客户端的 gunzip ）至少应该发送正确的内容类型标头，编码标记为 gzip，可能会导致更好的浏览器支持

2021-04-02 20:14:43

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

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

其它你可能感兴趣的问题

上一篇JavaScript：覆盖警报（）下一篇有效地替换字符串中的所有重音字符？