将JavaScript放在HTML文件中的何处？

210

假设我有一个相当庞大的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>

每个选项之间会有功能上的区别吗？

javascript  html  optimization 
— 尼克
source
— Ivar

Answers:

175

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

当然，李维斯的评论“就在您需要它之前，而不再需要它”确实是正确的答案，即“取决于情况”。

— 沃尔特·拉姆斯比
source
4
例如，如果您要编写大量jQuery内容，则需要在实际尝试使用库之前先加载该库。
— BryanH
58
另外，Yahoo EPT建议将JS放在底部的原因是，在JS加载然后执行时，浏览器必须进入单线程模式。如果脚本位于内容的开头或中间，则浏览器在处理JS时将“暂停”。通过将JS放在底部，内容将被加载并且通常可见，以便用户可以在浏览器仍在处理JS时开始阅读内容。
— BryanH，2009年
1
你好 我们是否也将这样的代码放在$(function () {...})页面的底部，还是必须放在其中<head>？
— 唐潘
7
我希望这里的“页面底部”指的是什么</body>？
— 2013年
1
现代浏览器还可以读取“ defer”属性。您可以在不在<body>底部的脚本标记上设置defer =“ defer”，当浏览器看到这些标记时，它将首先完成其余html的加载，然后返回并解释html的内容。脚本标签。如果您使用无法完全控制页面的某种框架，这将很有帮助。深入到这篇文章，并注意它是一个活的文件这样的一些信息已经过时：stackoverflow.com/questions/5250412/...
— LinuxDisciple
75

最好的地方就是在您需要它之前，并且不再需要它。

另外，根据用户的实际位置，使用类似Amazon S3服务的服务可能会帮助用户从物理上比您的服务器近的服务器上下载它。

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

— 列维·罗索（Levi Rosol）
source
60

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

— 烈士
source
1
“由脚本引起的问题是它们阻止并行下载。” —不再是这样：w3.org/TR/html5/scripting-1.html#attr-script-async
— Quentin
4

如果使用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中，这种方式显然无法正常工作。

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

— 巴特
source
8
您误解了OP的问题。他在问HTML脚本的哪个位置。他已经在使用外部文件，没有内联脚本。诚然，在他于09年4月对问题进行编辑之前，这还不清楚。也许删除这个答案？
— Mark Amery 2013年
@Leandro我想这是因为人们并不总是将实际问题牢记在心，但仍然认为诸如此类的答案很有用。然而，这个答案是有用的，但不一定相关。如果“投票”工具提示包含更明确的措词，则可能会更好，例如“此答案有用且相关”。
— WynandB
1
在gzip压缩的Javascript上：您只需配置您的网络服务器即可对其进行压缩...（或使用类似nginx的gzip_static模块/选项）（以及将gunzip用于其他客户端），至少应发送正确的内容类型标头，编码标记为gzip的编码，可能会提供更好的浏览器支持
— Gert van den Berg
4

将javascript放在顶部似乎比较整洁，但从功能上讲，最好使用HTML。这样，您的JavaScript将无法运行，并在加载HTML元素之前尝试引用它们。当您通过实际的互联网连接加载页面时，尤其是速度较慢的页面时，这种问题通常只会变得明显。

您也可以尝试通过从其他JavaScript代码添加标头元素来动态加载JavaScript，尽管只有在您不一直使用所有代码的情况下，这才有意义。

— 马蒂亚斯·旺德尔（Matthias Wandel）
source
3

使用cuzillion，您可以使用不同的方法测试脚本标记不同放置位置对页面加载的影响：内联，外部，“ HTML标记”，“ document.write”，“ JS DOM元素”，“ iframe”和“ XHR eval” 。有关差异的说明，请参见帮助。它还可以测试样式表，图像和iframe。

— 山姆·哈斯勒
source
1

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

— 古斯蒂风
source
0

就像其他人所说的，它很可能应该放在一个外部文件中。我更喜欢在<head />的末尾包含这些文件。这种方法比机器友好的方法更人性化，但是这样我就始终知道JS在哪里。在其他任何地方（imho）都包含脚本文件并不容易理解。

我真的需要挤出最后一毫秒，然后您可能应该执行Yahoo所说的。

— 狂暴
source
0

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

— 何塞·萨尔加多
source
0

问题的答案取决于。在这种情况下有2种情况，您需要根据自己的情况进行选择。

方案1-关键脚本/必需脚本

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

方案2-次要/分析脚本

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

奖金-异步/延迟

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

例如。 <script async src="script.js"></script>

— Praveen Thirumurugan
source
-1

您的javascript链接可以位于body标签的头部或末尾，确实可以通过将链接放在body标签的末尾来提高性能，但是除非性能存在问题，否则将它们放在头部会更好供人们阅读，并且您知道链接的位置，并且可以更轻松地引用它们。

— 蒂莫西·特劳斯代尔（Timothy Trousdale）
source
-1

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

  • 如果您打算在外部插入JS脚本，那么最好的位置是在页面顶部
  • 如果您打算在智能手机上使用页面，则在标签之前，然后选择页面底部。
  • 但是，如果计划组合HTML和JS（例如，动态创建并填充的HTML表），则必须将其放在需要的位置。
— 鲁德斯·H
source
我说的应该减去！！真是的
— Ludus H
外在与将脚本放在首位有什么关系？为什么页面底部是放置专门用于智能手机的脚本的好地方？仅当您使用时document.write，有关从JS动态生成HTML的声明才是正确的，而您可能不应该这样。
— 昆汀
您“假定”我的想法，并且由于我的回答减了？您认为您的假设可能比我的解释更好，对吧？我只是计划做简短的解释，如果某人无法理解，那么他会要求更多信息。在我的评论中，我建议将JS放到智能手机和平板电脑的页面末尾，正好在正文末尾，因为整个页面的加载速度更快，因为浏览器不需要切换到“单线程”模式，页面内容将开始出现在屏幕上...但是您可能知道这一点。
— Ludus H
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.