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

时间:2015-01-28 23:52:05

标签: javascript html css

情况:

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

优点:

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

缺点:

  • 可能的缓存问题

除了缓存部分之外,有没有理由这样做?

6 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

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

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

保持文件整理比较整洁。

答案 3 :(得分:0)

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

好的可读代码>优化的不可读代码

答案 4 :(得分:0)

有很多因素。

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

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

答案 5 :(得分:0)

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

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

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