JavaScript 在 <head> 中还是在 </body> 之前？答案

【问题标题】：JavaScript in <head> or just before </body>?JavaScript 在 <head> 中还是在 </body> 之前？
【发布时间】：2011-12-06 18:45:29
【问题描述】：

我即将开始一个新的 Web 项目，我计划在 <head> 和 </body> 之前放置一些 JavaScript，使用以下方案：

页面 UX 必不可少的脚本：在 <head> 中。正如我开始细读网络一样 - <head> 中的脚本是在页面加载之前加载的，因此将对用户体验至关重要的脚本放在那里是有意义的。
对设计和用户体验不重要的脚本（Google Analytics 脚本等）：在</body> 之前。

这是一个明智的做法吗？

另一种方法是将所有脚本放在<head> 中，并为非必要脚本添加延迟属性。但是，我读到旧版本的 Firefox 不使用 defer 属性。

【问题讨论】：

我认为这是一种完全可以接受的方法。我在某处读到 defer 在很多浏览器上都无法使用，但我可能会大错特错。
我想这一切都与品味有关。我个人将它们添加到正文标记之前（在头部），并在页面内需要的地方添加小sn-ps。
刚刚注意到这看起来像是 stackoverflow.com/questions/1013112/… 的骗子。
我想我可以看看这个答案：stackoverflow.com/questions/436411/…它可能对你有帮助
网站性能规则：将所有css放在开头（head），将所有javascript放在页面末尾。

标签： javascript html firefox user-experience

【解决方案1】：

我会说这是完全明智的。正如您所说，只要您不将基本脚本（例如jQuery、Modernizr 等）从<head> 中移出，就不会出现问题。

将非必要的脚本移动到页面底部应该有助于感知加载速度（以及最小化/连接脚本）。

【讨论】：

【解决方案2】：

将 JavaScript 代码放在一个单独的文件中，并在 HTML 的头部放置一个指向它的链接。

【讨论】：

这似乎不是一个好主意。很多资源（这里有很多描述）都提到了放置 JavaScript（外部或声明的脚本），总是在 </body> 标记之前。在这里，我引用 W3Schools：将脚本放在<body> 元素的底部会提高显示速度，因为脚本编译会减慢显示速度。但是关于在外部资源上组织 JavaScript 的意义：毫无疑问，这是一个很好的做法，实际上，例如，就代码可读性而言。

【解决方案3】：

我认为很多开发人员在 </body> 之前运行 JavaScript，以便在所有元素都渲染后运行。

但是，如果您正确地组织代码，则页面上的位置无关紧要。

例如，在使用 jQuery 时，您可以通过执行以下操作来确保在页面及其元素完全呈现之前不会运行代码：

$(document).ready(function(){
   //Code here
});

然后脚本引用可以放在head标签中。

应该在</body> 之前引用脚本标签。这可以防止在脚本加载时出现渲染阻塞，并且对站点感知速度更好。

在使用此技术时不应使用突兀的 JavaScript。

【讨论】：

不要忘记，当您将脚本移至底部时，内容加载速度会更快。假设没有使用 ajax 来加载页面默认内容。
位置非常重要，即使使用DOMReady。许多开发人员将 javascript 标签放在 </body> 之前，因为所有脚本都是同步加载和执行的。当它们在<head>时，页面渲染停止下载→解析→执行每个脚本。
(Piling on...) 将 SCRIPT 放在页面底部的主要原因与其说是确保 DOM 已加载（尽管这是一个重要原因），不如说是让页面显示为 RESPONSIVE .如果您在页面顶部加载脚本，浏览器会先下载它们，然后您的内容会一直等到它们被下载——这可能会使页面加载速度变慢，从而使用户不满意。
但是如果用户开始玩这个页面会发生什么。假设我有一个 AJAX 下拉菜单，它将在页面出现给用户后开始加载，但在加载时，用户点击了它！如果一个“非常不耐烦”的用户提交表单怎么办？

【解决方案4】：

这完全取决于您所说的“用户体验必不可少”的含义。例如，我同意让Modernizr 早点出现，但并非所有内容都需要立即加载。如果您想避免出现无样式文本 (FOUT)，这是一个很好的理由。同样，如果您的脚本会在用户执行任何操作之前影响页面的外观，您应该尽早加载这些脚本。

别忘了，速度是用户体验的一部分。当用户还看不到它所应用的内容时，让一些 jQuery 交互准备好运行没有任何优势。在结束时加载脚本之间的区别只是几秒钟的事情。如果您让页面先加载，用户将使用这些秒来进入页面，从而允许您不显眼地加载脚本。

如果您将脚本移至页面底部，您的页面加载速度会更快，这会影响您的页面排名。

此外，如果您尝试在脚本引用的元素加载之前运行脚本，某些版本的 Internet Explorer 会引发错误。

就像 Ed 所说，您的脚本应该存储在一个单独的文件中，并且文件尽可能少。

【讨论】：

【解决方案5】：

JavaScript 代码应该放在文档的末尾，这样它就不会延迟页面元素的并行加载。这确实需要以特定方式编写 JavaScript 代码，但它确实提高了页面加载速度。

此外，理想情况下，您可以在不同的（子）域下托管这样的引用。对 jQuery 的引用也应该指向 Google 的 CDN。

请参阅 Best Practices for Speeding Up Your Web Site 了解更多信息。

【讨论】：

【解决方案6】：

您希望将脚本放在</body> 之前的原因之一是，如果它们在没有用户交互的情况下操作 DOM，那么您需要加载 DOM 才能进行操作。另一种方法是添加一个事件侦听器并在页面加载时运行脚本，但这需要额外的代码，如果你有很多脚本，尤其是你自己没有编写的脚本，这可能会变得复杂。将它们放在页面末尾也将加快页面加载速度，尽管在 DOM 操作脚本的情况下，您可能会得到一些不那么漂亮的结果。

【讨论】：

您需要在答案中的 <body> 标记周围加上反引号 (``)。