假设我有一个相当大的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，尽管这只有在你没有一直使用所有代码的情况下才有意义。
其他回答
脚本应该包含在body标记的末尾，因为这样HTML将被浏览器解析并在脚本加载之前显示出来。
使用cuzillion，您可以使用不同的方法测试脚本标签的不同位置对页面加载的影响:内联，外部，“HTML标签”，“文档”。“JS DOM元素”，“iframe”，“XHR eval”。有关差异的解释，请参阅帮助。它还可以测试样式表，图像和iframe。
我想说的是，这取决于你打算用Javascript代码实现什么:
如果你计划插入外部JS脚本，那么最好 位置在页首 如果你打算在智能手机上使用页面，那么在页面底部， 就在标签之前。 但是，如果你计划组合HTML和JS(动态 创建和填充HTML表，例如)，然后你必须放 在你需要的地方。
把javascript放在顶部似乎更整洁，但从功能上讲，最好是HTML。这样，javascript就不会在加载HTML元素之前运行并试图引用它们。这类问题通常只有在通过实际的互联网连接加载页面时才会显现出来，尤其是在速度较慢的互联网连接上。
你也可以尝试通过从其他javascript代码中添加头元素来动态加载javascript，尽管这只有在你没有一直使用所有代码的情况下才有意义。
这个问题的答案要视情况而定。在这种情况下，有两种情况，您需要根据合适的情况做出选择。
场景1 -关键脚本/必用脚本
如果你使用的脚本对加载网站很重要，建议放在HTML文档的顶部，即<head>。一些例子包括-应用程序代码，引导，字体等。
场景2 -不太重要的/分析脚本
还有一些脚本不会影响网站的视图。这样的脚本建议在所有重要的片段加载后加载。答案会在文档的底部，也就是<body>的底部，在结束标签之前。一些例子包括-谷歌分析，hotjar等。
奖励-异步/延迟
您还可以告诉浏览器，脚本加载可以与其他脚本同时进行，并且可以使用脚本代码中的defer / async参数根据浏览器的选择进行加载。
如。<script async src="script.js"></script> .js
