假设我有一个相当大的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>
每个选项之间是否有任何功能差异?
当前回答
使用cuzillion，您可以使用不同的方法测试脚本标签的不同位置对页面加载的影响:内联，外部，“HTML标签”，“文档”。“JS DOM元素”，“iframe”，“XHR eval”。有关差异的解释，请参阅帮助。它还可以测试样式表，图像和iframe。
其他回答
对于100k的Javascript，永远不要把它放在文件中。使用外部脚本Javascript文件。您绝对不可能只在一个HTML页面中使用这么多代码。很可能您正在询问应该在哪里加载Javascript文件，对此您已经得到了满意的答案。
但我想指出的是，现代浏览器通常接受gzip的Javascript文件!只需将x.js文件gzip到x.js.gz，并在src属性中指向它。它不能在本地文件系统上工作，你需要一个web服务器来让它工作。但是传输字节的节省是巨大的。
我已经成功地在Firefox 3, MSIE 7, Opera 9和谷歌Chrome中测试了它。在Safari 3中显然不是这样工作的。
要了解更多信息，请参阅这篇博客文章，以及另一个非常古老的页面，尽管如此，它仍然很有用，因为它指出，web服务器可以检测浏览器是否可以接受gzip的Javascript。如果您的服务器端可以动态地选择发送gzip或纯文本，那么您就可以使页面在所有web浏览器中都可用。
这个问题的答案要视情况而定。在这种情况下，有两种情况，您需要根据合适的情况做出选择。
场景1 -关键脚本/必用脚本
如果你使用的脚本对加载网站很重要，建议放在HTML文档的顶部，即<head>。一些例子包括-应用程序代码，引导，字体等。
场景2 -不太重要的/分析脚本
还有一些脚本不会影响网站的视图。这样的脚本建议在所有重要的片段加载后加载。答案会在文档的底部，也就是<body>的底部，在结束标签之前。一些例子包括-谷歌分析，hotjar等。
奖励-异步/延迟
您还可以告诉浏览器，脚本加载可以与其他脚本同时进行，并且可以使用脚本代码中的defer / async参数根据浏览器的选择进行加载。
如。<script async src="script.js"></script> .js
答案取决于你如何使用javascript的对象。正如已经指出的，在页脚而不是页眉加载javascript文件肯定会提高性能，但应该注意，所使用的对象的初始化时间要晚于在页脚加载它们。还有一种方法是加载文件夹中的“js”文件 所有文件都可以使用。
根据经验，放置<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
使用cuzillion，您可以使用不同的方法测试脚本标签的不同位置对页面加载的影响:内联，外部，“HTML标签”，“文档”。“JS DOM元素”，“iframe”，“XHR eval”。有关差异的解释，请参阅帮助。它还可以测试样式表，图像和iframe。
