额外的、未使用的 CSS 定义会减慢浏览器的速度吗？答案

【问题标题】：Do additional, unused CSS definitions slow down browsers?额外的、未使用的 CSS 定义会减慢浏览器的速度吗？
【发布时间】：2011-04-28 22:42:38
【问题描述】：

在使用了许多 CMS 并剪切了许多 HTML 设计后，当我看到 SilverStripe's use of CSS 时，我被转换了。

本质上，根据您所在的页面更改<div> 标记中的 ID 是一种浪费，而更改 <body> 标记的类和 ID 将是更改特定页面的更简单方法。

在以下问题中，一位同事对此类信念提出质疑：

在特定网站上，我们有各种结构相似的页面。有些可能包含特殊形式，有些可能不包含。所有特殊表格都应该有不同的背景图片，具体取决于我们所在的小节。

由于声称“额外的 CSS 行会减慢 body.onLoads”，我在 CSS 中编码所有背景期望的论点被拒绝了。

任何人都可以引用各种案例之间的证据吗？案例包括：CSS 编码错误，CSS 编码良好，但每个页面上都有各种未使用的 CSS？

（特别是谈到我的问题，谁能解释我的不安？假设图像会在那里并根据数据库中的变量自动生成内联 CSS（或基于标题部分的样式标签），我感到不舒服。）

【问题讨论】：

标签： css version-control onload slowdown

【解决方案1】：

这无关紧要（明显），除非您的网站是 Gmail 或 YouTube（或类似的 CSS 繁重）。

Google 在其页面速度指南中提供了一些建议：

http://code.google.com/speed/page-speed/docs/payload.html#RemoveUnusedCSS

删除或推迟样式规则不被文档使用避免下载不必要的字节并允许浏览器更快地开始渲染。

在浏览器开始渲染之前网页，它必须下载和解析任何需要的样式表布置页面。即使一个样式表位于缓存的外部文件中，渲染被阻止，直到浏览器从磁盘加载样式表。在此外，一旦样式表加载后，浏览器的 CSS 引擎有评估包含在文件以查看规则是否适用于当前页面。通常，许多网络网站重用相同的外部 CSS 文件对于他们所有的页面，即使很多其中定义的规则不适用到当前页面。

最好的方法最大限度地减少由样式表加载和渲染时间是减少 CSS 占用空间；一个明显的方法是删除或推迟不是的 CSS 规则当前页面实际使用的。

关于这个：

由于声称“附加行 CSS 减慢 body.onLoads，”我的编码所有背景的参数 CSS 中的期望被拒绝了。

额外的时间大约是几毫秒。做更容易和可维护的事情，而不是更“高效”的事情。

【讨论】：

非常感谢您的精彩回答，三十。由于我们不是 CSS-Heavy，所以我感到松了一口气。现在看看我能不能通过政治..
感谢您的接受，虽然感觉有点为时过早。请注意，“CSS 重”是指 200KB stylesheet（在缩小之后！），就像 Youtube 一样。
也值得一读：stackoverflow.com/questions/5674395/… - 我应该在我自己的答案中使用“过早优化”这个短语 :)