<分区>
我对哪些 JavaScript 应该包含在什么地方感到困惑？
例如:
应该在哪里包含 jQuery 库？在
<head>或收盘前</body>元素？如果JavaScript定义在
<body>的底部, 可以在正文中内联使用吗？如果它阻止并行下载，那么为什么它从来没有说过在底部包含您的 CSS？
标签 javascript jquery html css
<分区>
我对哪些 JavaScript 应该包含在什么地方感到困惑？
例如:
应该在哪里包含 jQuery 库？在<head>或收盘前</body>元素？
如果JavaScript定义在<body>的底部, 可以在正文中内联使用吗？
如果它阻止并行下载，那么为什么它从来没有说过在底部包含您的 CSS？
最佳答案
CSS 在 <head> 中加载以防止 Flash Of Unstyled Content (FOUC)，即您的页面在一瞬间显示没有样式的情况。将它们加载到 <head> 中这是一个很小的牺牲，以确保您的页面在呈现内容时看起来完美。
JS 加载在底部有几个(但不限于以下)原因:
这样它就不会阻塞其他资源的加载和页面的渲染。
JS 的传统用途是增强功能，例如客户端验证和小特效。这些通常是可选的，不会影响页面的整体用途。因此它们最后加载。
在内容之后添加脚本可确保安全地访问脚本引用的元素，因为它们已经在 DOM 上。
但也有一些异常(exception)情况，例如:
像 Modernizr 这样的“飞行前库”
Modernizr 在 <html> 上应用类标记以表示功能的可用性，可用于 JS 和 CSS 目的。延迟这可能会由于添加类而导致样式突然转变，以及由于未及早完成检查而导致 JS 损坏。
像 LESS/SASS 这样的 CSS 解析器和影响样式的脚本
远程 LESS/SASS 样式通过 AJAX 加载，因此无论样式是否准备好，页面都会呈现。将它们加载到头部将使它们尽早加载样式以避免 FOUC。
需要尽早加载像 RequireJS 这样的“引导加载程序库”，以便并行下载其他脚本。
Web 应用程序需要 JS 作为平台。最好尽早加载这些库。此外，在 Web 应用程序中，在应用程序运行之前页面内容最少。
这里还有两个脚本属性值得一提，它们是 defer 。和 async .
基本上，这个想法是一个带有 defer 的脚本标签仅在解析 DOM 后运行，脚本标记为 async异步加载脚本而不阻塞其他操作。这意味着您可以在头部使用脚本，应用 async并行加载它们，defer确保 DOM 在执行时准备就绪，但每个都有自己的问题。
这是一个 MDN documentation更多地解释它们是什么和an answer这几乎说明了他们的历史、支持和现状。
关于javascript - <head> 中应包含哪些 JavaScript，<body> 中应包含哪些内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10661964/