在哪里把JavaScript放在一个HTML文件中？
说我有一个相当大的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>
每个选项之间是否会有function上的差异？
雅虎 由于浏览器下载组件的方式，卓越的性能团队build议将脚本放在页面的底部 。
当然，列维的评论“在你需要之前”是真正正确的答案，即“依赖”。
最好的地方就是在你需要之前。
而且，根据用户的物理位置，使用像亚马逊S3服务这样的服务可以帮助用户从离服务器更近的服务器上下载服务。
你的js脚本是一个常用的lib，如jQuery或原型？ 如果是这样，有许多公司，如谷歌和雅虎，有工具在分布式networking上为您提供这些文件。
作为一个经验法则，放置<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规范build议浏览器每个主机名并行下载至less两个组件。 如果您从多个主机名提供图像，则可以同时进行两个以上的下载。 然而，当脚本正在下载时，浏览器将不会启动任何其他下载，即使在不同的主机名上。 更多…
CSS
有点偏离主题，但是…把样式表放在顶部。
在研究Yahoo！的性能的同时，我们发现将样式表移动到文档HEAD中会使页面加载更快。 这是因为将样式表放在HEAD中允许页面逐步呈现。 更多…
进一步阅读
雅虎已经发布了一个非常酷的指南，列出了加快网站的最佳实践。 绝对值得阅读： https ： //developer.yahoo.com/performance/rules.html
用100K的Javascript，你不应该把它放在文件里面。 使用外部脚本的Javascript文件。 地狱里没有机会只能在一个HTML页面中使用这么多的代码。 可能你问你应该在哪里加载Javascript文件，为此你已经收到了令人满意的答案。
但是我想指出的是，现代浏览器通常接受gzip ped Javascript文件！ 只需将x.js文件gzip到x.js.gz ，并指向src属性即可。 它不能在本地文件系统上工作，你需要一个networking服务器才能工作。 但是传输字节的节省可能是巨大的。
我已经成功在Firefox 3，MSIE 7，Opera 9和Google Chrome上进行testing。 Safari 3显然不能这样工作。
有关详细信息，请参阅此博客文章 ，另一个非常古老的页面 ，但它是有用的，因为它指出，Web服务器可以检测浏览器是否可以接受gzipped的Javascript或不。 如果您的服务器端可以dynamicselect发送gzip或纯文本，则可以使该页面在所有Web浏览器中都可用。
使用cuzillion，你可以使用不同的方法testing页面加载脚本标签的不同位置的影响：内联，外部，“HTML标签”，“document.write”，“JS DOM元素”，“iframe”和“XHR eval” 。 请参阅帮助以了解差异的解释。 它也可以testing样式表，图像和iframe。
把JavaScript放在最上面看起来会更整洁一些，但是从function上来说，更好的方法是追踪HTML。 这样，您的JavaScript将不会运行，并尝试在加载之前引用HTML元素。 这种问题通常只在您通过实际的互联网连接加载页面时变得明显，特别是缓慢的页面。
您也可以尝试通过添加其他JavaScript代码中的标题元素来dynamic加载JavaScript，尽pipe如果您并未始终使用所有代码，这样做才有意义。
除了非常小的事情（比如onclick事件中的单语句调用）之外，我倾向于避免将Javascript放在HTML页面内，除非绝对确定它不能被其他页面使用。
因此，几乎所有的Javascript都存储在从HTML加载的JS文件中：
<script src="my_javascript.js"></script>
它也使我的代码/标记清洁分离。
答案取决于你如何使用JavaScript的对象。 正如已经指出的加载脚本而不是头文件的JavaScript文件，肯定会提高性能，但应注意所使用的对象比在脚注中加载的时间更早被初始化。 还有一种方法是加载放置在文件夹中的“js”文件，该文件将可用于所有文件。
像其他人所说的那样，它应该很可能在外部文件中。 我更喜欢把这样的文件包含在<head />的末尾。 这种方法比机器友好更人性化，但是这样我总是知道JS在哪里。 包含脚本文件在其他地方（imho）是不可读的。
我真的需要挤出每一个毫秒，那么你可能应该做雅虎所说的。
我总是把它放在我的页面底部，就像Walter Rumsby的答案一样，但是外部的JavaScript就在脑海里。 现在用CSS我不知道我总是使用外部CSS，所以它可以跨越我的整个网站。
我会说这取决于事实你计划用Javascript代码实现什么：
- 如果你计划插入外部的JS脚本，那么最好的地方是在页面的头部
- 如果您计划在智能手机上使用页面，则在页面底部，就在标签之前。
- 但是，如果您计划组合HTML和JS（例如dynamic创build和填充的HTML表），则必须将其放在需要的位置。
您的JavaScript链接可以在头部或身体标签的末尾得到，通过将链接放在身体标签的末尾，性能可以得到改善，但除非性能问题，否则将它们放在头部更好让人们阅读，你知道链接的位置，并可以参考他们更容易。
