假设我有一个相当大的 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
雅虎！ Exceptional Performance 团队推荐placing scripts at the bottom of your page，因为浏览器下载组件的方式。
当然，Levi 的评论“就在你需要它之前，不早点”确实是正确的答案，即“这取决于”。
【讨论】：
$(function () {...}) 这样的代码放在页面底部，还是必须在<head> 内？
</body>?
它的最佳位置是在您需要它之前，而不是更早。
此外，根据您用户的实际位置，使用像 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 规范建议浏览器每个主机名并行下载不超过两个组件。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。但是，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。 More...
有点离题，但是...将样式表放在顶部。
在 Yahoo! 研究性能时，我们发现将样式表移动到文档 HEAD 会使页面加载速度更快。这是因为将样式表放在 HEAD 中可以让页面逐步呈现。 More...
雅虎发布了一个非常酷的指南，其中列出了加快网站速度的最佳做法。绝对值得一读： https://developer.yahoo.com/performance/rules.html
【讨论】：
对于 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 浏览器中可用。
【讨论】：
将 javascript 放在顶部看起来更整洁，但从功能上讲，最好放在 HTML 之后。这样，您的 javascript 将不会在加载之前运行并尝试引用 HTML 元素。这类问题通常只有在您通过实际的 Internet 连接加载页面时才会显现出来，尤其是在速度较慢的情况下。
您也可以尝试通过添加来自其他 javascript 代码的标头元素来动态加载 javascript，尽管这仅在您不一直使用所有代码时才有意义。
【讨论】：
答案取决于您如何使用 javascript 的对象。正如已经指出的那样，在页脚而不是页眉处加载 javascript 文件肯定会提高性能，但应注意所使用的对象的初始化时间要晚于它们在页脚处加载。另一种方法是加载放置在文件夹中的“js”文件 这将适用于所有文件。
【讨论】：
脚本应该包含在 body 标记的末尾，因为这样 HTML 将被浏览器解析并在脚本加载之前显示。
【讨论】：
就像其他人所说的那样，它很可能应该放在外部文件中。我更喜欢在
我真的需要挤出最后一毫秒然后你可能应该按照雅虎所说的去做。
您的 javascript 链接可以位于正文标记的头部或末尾，将链接放在正文标记的末尾确实可以提高性能，但除非性能有问题，否则将它们放在head 更易于人们阅读，并且您知道链接的位置并可以更轻松地引用它们。
【讨论】：
我会说这实际上取决于你打算用 Javascript 代码实现什么：
【讨论】：
document.write 时，您关于从 JS 动态生成 HTML 的声明才是正确的，而您可能不应该这样做。
问题的答案取决于。这种情况有两种情况，您需要根据自己的情况做出选择。
场景 1 - 关键脚本/必须的脚本
如果您使用的脚本对加载网站很重要，建议将其放在 HTML 文档的顶部，即<head>。一些示例包括 - 应用程序代码、引导程序、字体等。
场景 2 - 不太重要/分析脚本
还使用了不影响网站视图的脚本。建议在加载所有重要段后加载此类脚本。答案将是文档的底部，即结束标记之前的 <body> 底部。一些示例包括 - Google 分析、hotjar 等。
奖励 - 异步/延迟
您还可以告诉浏览器脚本加载可以与其他浏览器同时完成，并且可以使用脚本代码中的 defer / async 参数根据浏览器的选择进行加载。
例如。 <script async src="script.js"></script>
【讨论】：