我正在阅读一个教程，作者提到在 HTML 中的结束body标记 ( </body>)附近包含 JavaScript 文件。
对于什么类型的功能，我不应该声明/定义 JavaScript 包含在该head部分中？对我来说，在结束标签附近包含像Google Analytics这样的 JavaScript 是有意义的body。在关闭body标签附近定义 JavaScript 时应该注意哪里？
我应该在哪里声明我的页面中使用的 JavaScript 文件？在 <head></head> 或 </body> 附近？
IT技术
javascript
html
2021-03-12 13:37:39
6个回答
经常有人争论说，为了提高速度，您应该将脚本标签放在文档的末尾（在结束正文标签之前）。虽然这将导致最快的页面加载，但它有一些严重的缺点。
首先，网页开发的一个常见习惯用法是在中间有一个头文件、一个页脚文件和你的内容。为了将不必要的 JavaScript 代码保持在最低限度，您通常希望将代码片段放在各个页面中。
例如，如果您在文档末尾包含jQuery，那么您的 jQuery 代码片段（如文档就绪的东西）必须在此之后出现。从开发的角度来看，这可能很尴尬。
其次，根据我的经验，由于页面加载速度更快，您最终会注意到应用了某些效果，因为在应用它们时页面已经加载。
例如，如果您在文档中放置一个表格并在正文结束标记之前放置：
$(function() {
$("tr:nth-child(odd)").addClass("odd");
});
通过适当的样式，应用的效果通常是可见的。我个人认为这可能会导致糟糕的用户体验。我认为，如果您没有令人不安的视觉效果，通常最好让页面加载速度稍微慢一点（通过将脚本放在顶部）。
我通常提倡有效的缓存策略，因此您只需在 JavaScript 文件发生变化时下载它们，就像在 PHP中对JavaScript 进行增压（但该原则适用于任何语言，而不仅仅是 PHP）并且仍然将脚本放在顶部。方便多了。
通过将它们放入 中，<head/>您可以强制浏览器在呈现页面之前下载文件。这会导致感知加载时间变慢。
通过将它们放在页脚中，就在结束 body 标记之前，浏览器将不会加载它们，直到它到达 HTML 解析中的那个点。这意味着脚本将在页面加载过程的稍后运行，但不会阻止资产下载和渲染过程。
哪种效果最好取决于您以及您如何开发代码。
在雅虎YSlow的工具有建议在此：
脚本引起的问题是它们会阻止并行下载。HTTP/1.1 规范建议浏览器每个主机名并行下载的组件不超过两个。如果您从多个主机名提供图像，则可以同时进行两次以上的下载。然而，在下载脚本时，浏览器不会启动任何其他下载，即使在不同的主机名上也是如此。
在某些情况下，将脚本移到底部并不容易。例如，如果脚本使用 document.write 插入页面的部分内容，则它不能在页面中移动到较低的位置。也可能存在范围界定问题。在许多情况下，有一些方法可以解决这些情况。
经常出现的另一种建议是使用延迟脚本。DEFER 属性指示脚本不包含 document.write，并且是浏览器可以继续呈现的线索。不幸的是，Firefox 不支持 DEFER 属性。在 Internet Explorer 中，脚本可能会被推迟，但不会如您所愿。如果一个脚本可以被推迟，它也可以移动到页面底部。这将使您的网页加载速度更快。
脚本标签通常应该在 head 部分。例外情况是，当它们进行重要的即时处理时，应将其延迟到页面加载时尽可能晚，以避免干扰页面，如 Google Analytics，或者当脚本标记的实际位置是其行为的一部分时。