html - 为浏览器优化的 CSS

Question

作为网络开发人员，您只能付出一定的努力来优化您的 CSS 代码。然而，计算机几乎可以立即考虑更多，因此在优化方面做得更好。 问题是:什么 CSS 代码假设是最优化的？ (对于现代浏览器)

考虑下图:

A、B、C 和 D 是 DOM 对象(可以说是 DIV 元素)并且数字 1-17 代表属性(如颜色、背景、宽度、高度等)

而所有数字都代表一种独特的属性。例如:

4 = background-color: #FF0;    
5 = width: 50px;
10 = background-color: #F00;

您可以通过多种方式为该网站生成 css 代码:

所有自己的 ID

#A { 1 2 5 8 9 10 12 }
#B { 1 4 5 11 12 13 14 15 }
#C { 1 2 3 5 7 }
#D { 3 4 5 6 16 17 }

但是，文件会非常大，属性不共享，一个简单的测试证明渲染速度相当慢。 (image1.html，见下面的文件生成脚本)

分享一些共同的属性

#A { 2 8 9 10 12 }
#B { 4 11 12 13 14 15 }
#C { 2 3 7 }
#D { 3 4 6 16 17 }
.1 { 1 }
.5 { 5 }

文件会更小，渲染似乎更快。 (参见 image2.html)

共享所有通用属性

#A { 8 9 10 }
#B { 11 13 14 15 }
#C { 7 }
#D { 6 16 17 }
.1 { 1 }
.3 { 3 }
.2 { 2 }
.4 { 4 }
.5 { 5 }
.12 { 12 }

文件会更小(大多数情况下)，而且渲染速度也更快。但请注意，A、B 和 C 最终有一个 ID，以及 4 个只包含一个属性的类! (参见 image3.html)

现在这些是 CSS 代码的三个简单示例。但是正如您可以想象的那样，当存在更多 DOM 对象并且存在更多属性重叠时，理论上您最终可能会得到一个具有 1 个 ID 和十分之一类的 DOM 对象!

假设最优化的 CSS 代码是什么？ (对于现代浏览器) 您应该限制每个 DOM 对象的类数量吗？与将其添加到 ID 相比，您是否更喜欢“包含类的单个属性”？

附注作为测试，我使用 PHP 加载了一张图片。比读取该 PNG 的像素值并使用 CSS 和 DIV 元素创建相同的图片。 The code for generating image1.html, image2.html and image3.html can be found here 您可以使用任何 PNG 图像...我使用了 this image

Answer 1

您已经用您创建的测试回答了您自己的问题。

@torazaburo 为您的问题提供了很好的意见。

为每个共享属性创建 ID 和类将加快您的运行时间。另一方面，创建包含最多属性的类将加快解析时间。 这两种方法的问题在于，如果您将其用作经验法则​​，您的代码将很快变得不可读且难以维护。

这是您自己的判断力和工作风格发挥作用的地方。 我看不出为单个属性创建 ID 或类或为 DOM 中不重复的元素创建类的意义，因为加载时间的增加是微不足道的。

因此，请尝试通过解决代码重复问题来优先考虑 CSS 优化。这将有效地减少您的总体加载时间，并使您的代码在未来具有可读性和可维护性。