html文档中的javascript和css，最佳实践？答案

【问题标题】：javascript and css in an html document, best practices?html文档中的javascript和css，最佳实践？
【发布时间】：2012-10-27 10:59:39
【问题描述】：

我需要为我正在开发的框架实现 javascript 和 css 资源，但我有一个 BIG 顾虑。

如果您查看当前的网站，如 Facebook、Google、Youtube 和其他顶级网站，它们的源代码会在代码的各个位置显示它们对 javascript 的使用。我想到的第一个问题是……不应该在文档开头分配 javascript 源 files 吗？您可以/应该能够将 javascript 命令放在脚本块中，但是......源文件呢？？

我一直在阅读的书籍建议（我猜是最佳实践）所有源文件都应该分配在 head 部分，同时将所有代码块移到页面末尾，就在关闭 body 部分之前（当可能）。

同样适用于 CSS。我已经看到在页面中间找到源文件包含的页面，而正常声明是在开头包含所有 css 文件（因为它比就地包含更有效，因为它们并行加载方式）。

在我看来，如果我要继续阅读我一直在阅读的书籍，源文件（javascript 和 css）总是放在最前面，脚本块（如果可能的话）放在文档的底部，并且应就地避免 CSS 包含（除非您想使用 scope 属性或它是 html 标记内的样式声明，如果可能，也应避免这种情况）。

是吗？

【问题讨论】：

标签： javascript css html include

【解决方案1】：

最佳实践是这样规定的：

CSS 文件应该放在文档的<head> 中，尽可能靠近顶部。我通常将我的放在任何<meta> 标签之后。

JavaScript 文件应尽可能靠近<body> 的末尾，通常直接位于</body> 标记之前。

这是因为 JavaScript 文件是串行加载并且是阻塞的，所以如果 JavaScript 文件包含在页面的<head> 中，则必须在加载文档主体之前将所有文件全部加载，这通常会创建延迟的感觉。

确实，JavaScript 文件和 JavaScript 脚本块之间几乎没有区别。它们都使用<script> 元素，只是外部引用的文件具有src 属性。从解析器的角度来看，它们是相同的。

从有效性的角度来看，<script> 元素可以放在页面的<head> 或<body> 中的任何位置，有时<script> 文件应该放在<head> 中，例如当使用 typekit 之类的东西时，因为这将确保及时加载字体文件，以便在页面加载后立即显示字体，防止 FOUF（无样式字体的闪烁）

【讨论】：

正是我一直在寻找的那种答案，现在我可以调整我的框架以使资产按照应有的方式运行。非常感谢！ :)