我正在阅读一个教程，作者提到要在 HTML 中的结束 body 标记 (</body>) 附近包含 JavaScript 文件。
对于哪些类型的功能，我不应该在 head 部分中声明/定义 JavaScript？对我来说，在结束 body 标记附近包含像 Google Analytics 这样的 JavaScript 是有意义的。在结束 body 标记附近定义 JavaScript 时应该注意哪些地方？
【问题讨论】：
标签： javascript html
我认为最好将脚本标签放在正文结束标签之前。因为：
来自this article。雅虎的性能规则 6 也是Move scripts to the bottom。
【讨论】：
将它放在正文末尾附近的唯一原因，AFAIK，是为了能够在网络浏览器解析您的 HTML 文档之后执行 JavaScript。例如。如果您的 JavaScript 处理“所有名为 hello 的元素”，则浏览器需要在执行 JavaScript 之前读取整个文档。有道理，对吧？
在例如jQuery，您可以将 JavaScript 放在文档中的任何位置并使用：
$(document).ready(function () {
// Your code here
});
...在执行内部函数之前确保整个文档已加载到DOM。当然，这也可以使用普通的 JavaScript 来完成，但请注意不要破坏与某些浏览器的兼容性，因为它们的需求往往会有很大差异。
【讨论】：
经常有人争辩说，为了提高速度，您应该将脚本标签放在文档的末尾（在结束正文标签之前）。虽然这将导致最快的页面加载，但它有一些严重的缺点。
首先，网页开发的一个常见习语是在中间有一个头文件、一个页脚文件和你的内容。为了尽量减少不必要的 JavaScript 代码，您通常希望将代码 sn-ps 放在各个页面中。
例如，如果您在文档末尾包含jQuery，那么您的 jQuery 代码 sn-ps（类似于文档就绪的东西）必须在之后发生。从开发的角度来看，这可能很尴尬。
其次，根据我的经验，由于页面加载速度更快，您最终可能会注意到某些效果正在应用，因为在应用它们时页面已经加载。
例如，如果您将表格放在文档中，并且放在正文关闭标记之前：
$(function() {
$("tr:nth-child(odd)").addClass("odd");
});
通过适当的样式，应用的效果通常是可见的。我个人认为这可能会导致糟糕的用户体验。我认为，如果您不会获得令人不安的视觉效果，通常最好让页面加载稍微慢一点（通过将脚本放在顶部）。
我通常提倡有效的缓存策略，因此您只需要在 JavaScript 文件发生更改时下载它们，例如 Supercharging JavaScript in PHP（但这些原则适用于任何语言，而不仅仅是 PHP）并且仍然将脚本放在顶部。方便多了。
【讨论】：
您应该将 JavaScript 放在 </body> 之前。理想情况下，您的 HTML 应该在没有 JavaScript 的情况下运行，因此它应该是最后加载的内容之一。
请记住，您应该使用 CSS 而不是 JavaScript 来隐藏元素。这样可以避免在页面加载时看到元素出现和消失。
您可能还会遇到以下问题...
在这种情况下，我将使用 PHP 作为示例。
您的footer.php 文件当前可能如下所示：
<script src="jquery.js"></script>
<script src="custom.js"></script>
</body>
</html>
但是在极少数情况下您想为一页专门添加一些 <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';
然后，在极少数情况下，您需要为一页使用自定义 <script>，请执行以下操作：
<?php require 'footer-start.php'; ?>
<script>...</script>
<?php require 'footer-end.php'; ?>
这样做意味着您不必更改所有以前引用 footer.php 的代码。
【讨论】：
脚本元素阻止渐进式页面下载。
浏览器一次下载多个组件，但是当它们遇到外部脚本时，它们会停止进一步的下载，直到脚本文件被下载、解析和执行。
这会损害整个页面时间，尤其是在页面加载期间发生多次时。
为了最大限度地减少阻塞效应，您可以将脚本元素放在末尾
页面，就在结束标记之前。
这样脚本就没有其他资源可以阻止了。
其余页面组件将被下载并已吸引用户。
最糟糕的反模式是在文档头部使用单独的文件：
<!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>
更好的选择是合并所有文件：
<!doctype html>
<html>
<head>
<title>My App</title>
<script src="all_20100426.js"></script>
</head>
<body>
...
</body>
</html>
最好的选择是将组合脚本放在页面的最后：
<!doctype html>
<html>
<head>
<title>My App</title>
</head>
<body>
...
<script src="all_20100426.js"></script>
</body>
“JavaScript 模式，作者 Stoyan Stefanov （奥莱利）。版权所有 2010 Yahoo!, Inc., 9780596806750。”
【讨论】：
我喜欢在头部加载一个小的 js 文件，它可以处理 (1) 在页面呈现之前发生的任何事情，以及 (2) 在页面加载之后或根据需要加载其他脚本文件。
【讨论】：
您应该在</body> 附近进行。原因很简单：如果放到head区，必须先加载文件，然后body区才可以。在那个时候，用户只看到一个白屏。
但这取决于您的网站。我会在头部区域加载诸如 mootools 之类的框架，事件或 AJAX 的其他功能或应该在 </body> 附近加载的东西。
【讨论】：
声明接近尾声的原因是您的页面可以在等待获取 .js 之前开始绘制。
所以，你最后想要的东西对页面渲染没有影响，反之亦然。
【讨论】：
Google pagespeed 有一些关于如何并行下载脚本的 nice explanation。
他们仍然建议将它们放在页面的顶部。
【讨论】：
通过将它们放在<head/> 中，您可以强制浏览器在呈现页面之前下载文件。这会导致感知的加载时间变慢。
通过将它们放在页脚中，就在结束 body 标记之前，浏览器将不会加载它们，直到它到达 HTML 解析的那个点。这意味着脚本将在页面加载过程中稍后运行，但不会阻塞资产下载和渲染过程。
哪种效果最好取决于您以及您如何开发代码。
【讨论】：
脚本标签通常应该在 head 部分。例外情况是，当它们执行重要的即时处理时，应将其延迟到页面加载时尽可能晚，以避免干扰即将出现的页面，例如 Google Analytics，或者当脚本标记的实际放置是其行为的一部分时。
【讨论】：
Yahoo YSlow tool 对此有建议：
脚本引起的问题是 他们阻止并行下载。这 HTTP/1.1 规范建议 浏览器下载不超过两个 每个主机名并行的组件。 如果您从多个 主机名，您可以获得两个以上 下载并行发生。尽管 一个脚本正在下载，但是， 浏览器不会启动任何其他 下载，即使在不同的 主机名。
在某些情况下，这并不容易 将脚本移至底部。如果，对于 例如，脚本使用 document.write 插入部分 页面内容，不能移动 在页面下方。也可能有 范围界定问题。在很多情况下，有 是解决这些问题的方法 情况。
另一种建议，通常 出现的是使用延迟脚本。 DEFER 属性表示 脚本不包含 document.write，是一个线索 他们可以继续的浏览器 渲染。不幸的是，火狐 不支持 DEFER 属性。 在 Internet Explorer 中，脚本可能 推迟，但不至于 想要的。如果可以推迟脚本， 也可以移到底部 这页纸。这将使您的网络 页面加载速度更快。
【讨论】：