假设我有一个相当庞大的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>
每个选项之间是否存在功能差异？
答案 0 :(得分：166)
雅虎！由于浏览器下载组件的方式，特殊性能团队建议使用placing scripts at the bottom of your page。
当然，Levi的评论“就在你需要它之前并且不久”是真正正确的答案，即“它取决于”。
答案 1 :(得分：73)
最好的地方就在你需要它之前和之后。
此外，根据您用户的实际位置，使用亚马逊S3服务等服务可以帮助用户从物理上比服务器更靠近服务器的服务器下载。
你的js脚本是常用的lib，比如jQuery还是原型？如果是这样，有许多公司，如谷歌和雅虎，都有工具在分布式网络上为您提供这些文件。
答案 2 :(得分：55)
根据经验，放置<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规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以并行执行两次以上的下载。然而，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。 More...
有点偏离主题，但......将样式表放在顶部。
在研究Yahoo!的性能时，我们发现将样式表移动到文档HEAD会使页面看起来加载速度更快。这是因为将样式表放在HEAD中允许页面逐步呈现。 More...
雅虎发布了一个非常酷的指南，其中列出了加快网站速度的最佳做法。绝对值得一读： https://developer.yahoo.com/performance/rules.html
答案 3 :(得分：4)
使用100k的Javascript，你永远不应该把它放在文件中。使用外部脚本Javascript文件。你没有机会只在一个HTML页面中使用这么多代码。可能你问的是你应该在哪里加载Javascript文件，为此你已经收到了满意的答案。
但我想指出的是，现代浏览器通常接受 gzip ped Javascript文件！只需将x.js文件gzip到x.js.gz，然后指向src属性中的文件。它不适用于本地文件系统，您需要一个Web服务器才能工作。但转移字节的节省可能是巨大的。
我已经在Firefox 3，MSIE 7，Opera 9和Google Chrome中成功测试过它。它显然在Safari 3中不起作用。
有关详细信息，请参阅this blog post和其他very ancient page，但它仍然有用，因为它指出网络服务器可以检测浏览器是否可以接受gzip压缩包。如果您的服务器端可以动态选择发送gzip文本或纯文本，则可以使该页面在所有Web浏览器中都可用。
答案 4 :(得分：3)
使用cuzillion，您可以使用不同的方法测试不同位置的脚本标记对页面加载的影响：内联，外部，“HTML标记”，“document.write”，“JS DOM元素”，“iframe “和”XHR评估“。有关差异的说明，请参阅help。它还可以测试样式表，图像和iframe。
答案 5 :(得分：3)
将javascript放在顶部会显得更整洁，但从功能上来说，更好地追求HTML。这样，您的javascript将无法运行并尝试在加载之前引用HTML元素。当您通过实际的互联网连接加载页面时，这种问题通常只会变得明显，尤其是慢速连接。
您还可以尝试通过添加其他javascript代码中的标头元素来动态加载javascript，但这只有在您不使用所有代码的情况下才有意义。
答案 6 :(得分：1)
答案取决于你如何使用javascript的对象。正如已经指出的那样，在页脚而不是标题处加载javascript文件肯定会提高性能，但是应该注意所使用的对象的初始化时间比它们在页脚加载时要初始化。另一种方法是加载放在文件夹中的'js'文件 这将适用于所有文件。
答案 7 :(得分：0)
就像其他人所说的那样，它很可能会进入外部文件。我更喜欢在＆lt; head /＆gt;的末尾包含这些文件。这种方法比机器友好更人性化，但这样我总是知道JS的位置。在其他地方（imho）包含脚本文件只是不可读。
我真的需要挤出每一个ms，然后你可能应该做雅虎所说的。
答案 8 :(得分：0)
脚本应该包含在body标签的末尾，因为这样，HTML将被浏览器解析并在加载脚本之前显示。
答案 9 :(得分：0)
问题的答案取决于。在这种情况下有两种情况，您需要根据自己的情况做出选择。
方案1-关键脚本/必需脚本
如果您使用的脚本对于加载网站很重要，建议将其放置在HTML文档的顶部，即<head>。一些示例包括-应用程序代码，引导程序，字体等。
方案2-不那么重要/分析脚本
还使用了不会影响网站视图的脚本。建议在所有重要段都加载后再加载此类脚本。答案将在文档的底部，即<body>的底部，在结束标记之前。一些示例包括-Google Analytics（分析），hotjar等。
奖金-异步/延迟
您还可以告诉浏览器，脚本加载可以与其他脚本同时完成，并且可以根据浏览器的选择使用脚本代码中的defer / async参数来加载。
例如<script async src="script.js"></script>
答案 10 :(得分：-1)
你的javascript链接可以放在head标签的头部或末尾，通过将链接放在body标签的末尾来提高性能，但除非性能有问题，否则将它们放在head更适合人们阅读，你知道链接的位置，并且可以更容易地引用它们。
答案 11 :(得分：-1)
我想说这取决于你用Javascript代码计划实现的目标：