假设我有一个相当大的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。这样，javascript就不会在加载HTML元素之前运行并试图引用它们。这类问题通常只有在通过实际的互联网连接加载页面时才会显现出来，尤其是在速度较慢的互联网连接上。
你也可以尝试通过从其他javascript代码中添加头元素来动态加载javascript，尽管这只有在你没有一直使用所有代码的情况下才有意义。
其他回答
你的javascript链接既可以放在头部也可以放在正文标签的末尾，将链接放在正文标签的末尾确实可以提高性能，但除非性能是一个问题，否则将它们放在头部更便于人们阅读，你知道链接的位置，也可以更容易地引用它们。
根据经验，放置<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>
Why?
脚本造成的问题是它们会阻塞并行下载。HTTP/1.1规范建议浏览器在每个主机名上并行下载不超过两个组件。如果从多个主机名提供映像，则可以同时进行两次以上的下载。然而，在下载脚本时，浏览器不会启动任何其他下载，即使是在不同的主机名上。更多…
CSS
有点跑题了，但是…把样式表放在顶部。
在Yahoo!之后，我们发现将样式表移动到文档HEAD会使页面加载更快。这是因为将样式表放在HEAD中允许页面逐步呈现。更多…
进一步的阅读
雅虎发布了一个非常酷的指南，列出了加快网站速度的最佳实践。绝对值得一读: https://developer.yahoo.com/performance/rules.html
把javascript放在顶部似乎更整洁，但从功能上讲，最好是HTML。这样，javascript就不会在加载HTML元素之前运行并试图引用它们。这类问题通常只有在通过实际的互联网连接加载页面时才会显现出来，尤其是在速度较慢的互联网连接上。
你也可以尝试通过从其他javascript代码中添加头元素来动态加载javascript，尽管这只有在你没有一直使用所有代码的情况下才有意义。
使用cuzillion，您可以使用不同的方法测试脚本标签的不同位置对页面加载的影响:内联，外部，“HTML标签”，“文档”。“JS DOM元素”，“iframe”，“XHR eval”。有关差异的解释，请参阅帮助。它还可以测试样式表，图像和iframe。
就像其他人说的那样，它应该放在一个外部文件中。我更喜欢在<head />的末尾包含这样的文件。这个方法比机器友好，但这样我总是知道JS在哪里。它只是不像在其他地方包含脚本文件那样可读(恕我冒昧)。
如果你真的需要挤出每一个毫秒，那么你可能应该做雅虎说的。
