哪些 JavaScript 应该包含在 <head> 中，哪些包含在<body>中

What JavaScript should be included in the <head> and what included in the <body>?

本文关键字：包含 body 哪些 head JavaScript      更新时间：2023-09-26

我对应该在哪里包含哪个JavaScript感到困惑？

例如：

  • 应该在哪里包含jQuery库？在<head>还是在结束</body>元素之前？

  • 如果 JavaScript 定义在<body>的底部，它可以在正文中内联使用吗？

  • 如果它阻止了并行下载，那么为什么它从来没有说在底部包含您的 CSS？

CSS

CSS 加载到<head>中以防止无样式内容 (FOUC( 的 Flash 出现这种情况，即您的页面在一瞬间显示时没有样式。将它们加载到<head>中是一个很小的牺牲，以确保您的页面在呈现内容时看起来完美。

.JS

一般情况：

JS加载在底部有几个(但不限于以下(原因：

  • 这样它就不会阻止其他资源的加载和页面的呈现。

  • JS的传统用途是用于增强，例如客户端验证和次要的特殊效果。这些通常是可选的，不会影响页面的整体用途。因此，它们最后加载。

  • 在内容之后添加脚本可确保安全地访问脚本引用的元素，因为它们已在 DOM 上。

异常：

但该规则有一些例外，例如：

  • "飞行前图书馆"，如 Modernizr

    Modernizr 在 <html> 标记上应用类来表示功能的可用性，这些功能可用于 JS 和 CSS 目的。延迟此操作可能会导致由于类添加而导致样式突然转变，以及由于未早点完成检查而导致的 JS 损坏。

  • CSS 解析器，如 LESS/SASS 和影响样式的脚本

    远程 LESS/SASS 样式是通过 AJAX 加载的，因此无论样式是否已准备就绪，页面都会呈现。 将它们加载到头部将使它们尽早加载样式以避免 FOUC。

  • 像 RequireJS 这样的"引导加载程序库"需要尽早加载，以便并行下载其他脚本。

  • Web 应用程序需要 JS 作为平台。最好尽早加载这些库。此外，在 Web 应用程序中，在应用程序运行之前页面内容最少。

边缘情况：

这里还有两个脚本属性值得一提，分别是defer和async。

基本上，这个想法是具有defer的脚本标记仅在解析 DOM 后运行，而具有 async 的脚本标记异步加载脚本而不会阻止其他操作。这意味着您可以在头部使用脚本，应用async并行加载它们，并defer确保 DOM 在执行时准备就绪，但每个脚本都有自己的问题。

这是一个MDN文档，解释了更多关于它们是什么的信息，以及一个几乎可以谈论它们的历史，支持和当前状态的答案。

相关文章：