为什么不将CSS直接放入HTML？

Question

情况：

我有一个动态提供的网站。为了优化网站的速度，所有CSS和javascript都直接放入HTML文档中。

优点：

• 削减网络请求
• 需要下载较少的文件
• 更快的网页下载

缺点：

• 可能的缓存问题

除了缓存部分之外，有没有理由不这样做？

Answer 1

如果您将CSS放在单独的样式表文件中，即使您的CSS通过自动服务器端进程插入到传出文档中，您的站点也将更易于维护。

通过将CSS放在单独的文件中，可以缩小每个页面的下载速度。

然而，需要下载＆＃34;更少文件的好处＆＃34;和＃34;更快的网页下载＆＃34;是假的。使用单独的CSS文件（带有侵略性 Expires: 标题），与嵌入CSS相比，您的网页加载速度更快，因为浏览器赢了在每个后续页面请求上重新请求样式表（虽然第一次访问会产生这个成本，但实际上很小）。

Answer 2

CSS旨在将内容与演示文稿分开。 W3Schools认为，最好使用html作为结构，css作为样式。

这会让您更轻松。如果您正在处理大型文件，最好为您的css或更好的多个样式表提供单独的样式表。在html文档中使用内联样式或样式标记可能非常难以理解。

Answer 3

在子域上设置两个示例，然后在tools.pingdom.com上测试两者

您将看到两者之间加载速度的差异。

保持文件整理比较整洁。

Answer 4

前端用户通常不会注意到这样的性能提升，他们会注意到您的代码有错误并且您需要永远修复它，因为代码不可读且难以调试。

好的可读代码＆gt;优化的不可读代码

Answer 5

有很多因素。

如果您的应用程序是SPA并使用相对紧凑的CSS和自包含脚本，那么最好将其作为单个文件提供。

在所有其他情况下，您最好使用工具来比较各种组合。

Answer 6

这可能是一个更好的问题。为什么 - 为什么 - 不会 - 你？除非您有一个页面，否则您可能希望在每个页面上使用相同的样式。所以，你不想一遍又一遍地写那些。

您浪费时间将CSS添加到页面中（除非您也动态生成CSS）。我认为在大多数情况下，您可以在生成的页面中添加指向CSS的链接，并且它几乎在所有情况下都会结束（除了新用户的初始页面加载）在服务器端和客户端都更快。

除非您同时生成CSS，否则也是如此。