29

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

例如：

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

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

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

4

2 回答 2

23

CSS

加载 CSS 是<head>为了防止 Flash Of Unstyled Content (FOUC)，在这种情况下，您的页面会在一瞬间显示没有样式。加载它们<head>是一个很小的牺牲，以确保您的页面在内容被渲染时看起来很完美。

JS

一般情况：

JS 加载到底部有几个（但不限于以下）原因：

  • 这样它就不会阻塞其他资源的加载和页面的渲染。

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

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

例外：

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

  • 像 Modernizr 这样的“飞行前图书馆”

    Modernizr 在<html>标签上应用类来表示功能的可用性，可用于 JS 和 CSS 目的。延迟这可能会由于添加类而导致样式突然转变，以及由于没有更早进行检查而导致 JS 损坏。

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

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

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

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

边缘案例：

这里还有两个值得一提的 script 属性，它们是defer和async。

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

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

于 2012-05-19T03:02:12.030 回答
11
于 2012-05-19T08:02:41.893 回答