我应该在哪里声明我的页面中使用的JavaScript文件？ 在<head> </ head>或附近</ body>？
我正在阅读一个教程，作者提到要在HTML中closuresbody标签（ </body> ）附近包含Javascript文件。
我想知道什么types的function，我不应该声明/定义JavaScript包括head部分？ 在结束标签附近添加JavaScript等Google Analytics（分析）是非常有意义的。 在定义JavaScript的时候，我应该在哪里小心谨慎地在closuresbody标签附近？
经常会有人争辩说，为了达到速度的目的，你应该把脚本标签放在文档的最后（在closures的标签之前）。 虽然这会导致页面加载速度最快，但它有一些严重的缺点。
首先，网页开发的一个常见习惯就是在页面中间有一个头文件，一个页脚文件和你的内容。 为了将不必要的Javascript保持在最低限度，您通常需要将代码片段放在单独的页面中。
如果你包含jquery，例如，在文档的末尾，你的jQuery代码片段（如文档准备好的东西）必须发生在那之后 。 从发展的angular度来看，这可能是尴尬的。
其次，根据我的经验，由于页面加载速度更快，您可能会注意到应用了某些效果，因为页面在应用时已加载。
例如，如果你把一个表放在一个文档中，并在正文closures标签之前：
$(function() { $("tr:nth-child(odd)").addClass("odd"); });
以适当的样式，应用效果往往是可见的。 就我个人而言，我认为这可能会导致糟糕的用户体验。 我觉得如果你没有看到令人不安的视觉效果的话，通常你的页面加载速度会稍微慢一点（通过把脚本放在最前面）。
我通常提倡有效的caching策略，所以在更改时只需要下载Javascript文件，就像在PHP中增加Javascript一样 （但是这些原则适用于任何语言，而不仅仅是PHP），并且仍然将脚本放在顶部。 这是更方便。
雅虎YSlow工具有这样的build议：
脚本造成的问题是阻止并行下载。 HTTP / 1.1规范build议浏览器每个主机名并行下载至less两个组件。 如果您从多个主机名提供图像，则可以同时进行两个以上的下载。 然而，当脚本正在下载时，浏览器将不会启动任何其他下载，即使在不同的主机名上。
在某些情况下，将脚本移动到底部并不容易。 例如，如果脚本使用document.write插入页面内容的一部分，则不能在页面中移动较小的内容。 也可能有范围问题。 在许多情况下，有办法解决这些情况。
经常出现的另一个build议是使用延迟脚本。 DEFER属性指示该脚本不包含document.write，并且是浏览器可以继续呈现的线索。 不幸的是，Firefox不支持DEFER属性。 在Internet Explorer中，脚本可能会被延期，但不会如预期的那么多。 如果一个脚本可以被延期，它也可以被移动到页面的底部。 这将使您的网页加载速度更快。
通过将它们放在<head/>您可以强制浏览器在可以呈现页面之前下载文件。 这会导致感知的加载时间减慢。
通过将它们放在页脚中，就在closuresbody标签之前，浏览器将不会加载它们，直到它parsingHTML为止。 这意味着脚本稍后会在页面加载过程中运行，但不会阻止资源下载和呈现过程。
哪一个最好取决于你，以及如何开发你的代码。
Google pagespeed对如何并行化脚本的下载有一些很好的解释 。
他们的build议仍然是把它们放在页面的头部。
脚本标签通常应该在头部。 例外情况是，当他们进行重要的即时处理时，应尽可能延迟页面加载时间，以避免干扰页面，就像Google Analytics一样，或者脚本标记的实际位置是其行为的一部分。
在接近尾声明的原因是，您的页面可以开始绘制，然后等待获取.js。
Ergo，最后你想要的东西对页面渲染没有任何影响，反之亦然。
我喜欢在头部加载一个小的js文件，它处理（1）在页面呈现之前发生的任何事情，以及（2）在加载页面之后加载其他脚本文件，或者根据需要加载。
我相信最好在closuresbody标签之前放置脚本标签。 因为：
- 如果元素在脚本下面，则元素将被禁止呈现。
- 在IE6中，如果页面下方的IE7资源被阻止下载，
从这篇文章。 另外，雅虎的性能规则6是将脚本移到底部
把它放在主体AFAIK的最后面的唯一原因是能够在Web浏览器parsingHTML文档后执行JavaScript。 例如，如果JavaScript处理“所有名为hello元素”，则浏览器在执行JavaScript之前需要读取整个文档。 有道理吧？
在例如JQuery中，您可以将JavaScript放在文档的任何位置，并使用：
$(document).ready(function () { // your code here });
…确保在执行内部函数之前将整个文档加载到DOM中。 当然，这也可以用普通的JavaScript来完成，但是要注意不要破坏与某些浏览器的兼容性，因为它们的需求往往有很大的差别。
你应该在</body>附近做。 原因很简单：如果你把它放到head区域，文件必须在人体区域之前加载。 那个时候，用户只是看到一个白色的屏幕。
但这取决于你的网站。 我会加载框架，如头部区域的mootools，事件的其他function或AJAX或东西应该加载在</body>附近。
<script>元素的地方
脚本元素阻止渐进式页面下载。
浏览器一次下载几个组件，但是当它们遇到外部脚本时，它们将停止进一步下载，直到脚本文件被下载，parsing并执行。
这会损害整个页面时间，特别是在页面加载期间发生多次时。
为了最大限度地减less阻塞效应，您可以将脚本元素放置到页面的结尾处，紧靠结束标记之前。
这样脚本就没有其他的资源可以阻止了。 其余的页面组件将被下载并且已经吸引用户。
最糟糕的反模式是在文档的头部使用单独的文件：
<!doctype html> <html> <head> <title>My App</title> <!-- ANTIPATTERN --> <script src="jquery.js"></script> <script src="jquery.quickselect.js"></script> <script src="jquery.lightbox.js"></script> <script src="myapp.js"></script> </head> <body> ... </body> </html>
更好的select是将所有文件合并：
<!doctype html> <html> <head> <title>My App</title> <script src="all_20100426.js"></script> </head> <body> ... </body> </html>
最好的select是将组合脚本放在页面的最后：
<!doctype html> <html> <head> <title>My App</title> </head> <body> ... <script src="all_20100426.js"></script> </body>
“JavaScript模式，Stoyan Stefanov（O'Reilly）。 Copyright 2010 Yahoo !, Inc.，9780596806750.“
你应该把JavaScript放在</body>之前。 理想情况下，您的HTML应该没有JavaScript的function，所以它应该是最后加载的东西之一。
请记住，您应该使用CSS来隐藏元素而不是JavaScript。 这可以避免在页面加载时看到元素的出现和消失。
您也可能会遇到以下问题…
问题
在这种情况下，我将以PHP为例。
您的footer.php文件目前可能如下所示：
<script src="jquery.js"></script> <script src="custom.js"></script> </body> </html>
但是在极less数情况下，您想要为一个页面专门添加一些<script> ？ 你将不能把它放在footer.php之后，因为你不会再在<body>标签中，但是你不能把它放在之前，因为那么你会从你的代码中错过jquery.js 。
解
有一个footer-start.php文件：
<script src="jquery.js"></script> <script src="custom.js"></script>
和一个footer-end.php文件：
</body> </html>
并有你的footer.php是简单的：
<?php require 'footer-start.php'; require 'footer-end.php';
然后，在极less数情况下，您需要为一个页面使用自定义<script> ，请执行以下操作：
<?php require 'footer-start.php'; ?> <script>...</script> <?php require 'footer-end.php'; ?>
这样做意味着您不必更改所有以前的代码footer.php引用。
