最优化的浏览器CSS

Question

作为Web开发人员,您只需付出一定的努力来优化CSS代码.但是,计算机几乎可以在几乎所有时间内考虑更多,因此优化更好.问题是:假设最优化的CSS代码是什么？ (适用于现代浏览器)

考虑以下图像:

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

而所有数字代表一个独特的属性.例如:

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

您可以通过多种方式为此Web生成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和10个类的DOM对象!

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

ps 作为测试我使用PHP加载了一个图像.比读取PNG的像素值并使用CSS和DIV元素创建相同的图片.生成image1.html,image2.html和image3.html的代码可以在这里找到 你可以使用任何PNG图像...我用过这个图像

Answer 1

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

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

为每个共享属性创建ID和类将加速运行时.另一方面,创建包含最多属性的类将加快解析时间.这两种方法的问题在于,如果您将此作为经验法则使用,那么您的代码将很快变得难以理解且维护起来很复杂.

这是你自己的判断和工作方式到位的地方.我没有看到为单个属性创建ID或类,或者为DOM中不重复的元素创建类,因为您将体验到的加载时间增益将是微不足道的.

因此,尝试通过解决代码重复问题来优先处理CSS优化.这将有效地减少您的总体加载时间,并使您的代码可读和可维护.

Answer 2

浏览器应该在内部进行任何此类优化，因为它们 \xe2\x80\x9ccompile\xe2\x80\x9d CSS。编译器负责优化，因为它了解其实现细节并能够判断哪一个最适合其需求。

\n\n

程序员只能处理编译器无法推断的事情（例如，由于无法解决停止问题）。否则，编写语义正确的代码是他们最好的选择。

\n\n

这实际上与 WebKit 核心贡献者 Antti Koivisto 在 2011 年花了一些时间优化其 CSS 选择器匹配时所说的一致：

\n\n

\n
我的观点是，作者不需要担心优化选择器（据我所知，他们通常不\xe2\x80\x99t），这应该是引擎的工作。
\n

\n\n

^{通过CSS 选择器引用性能已更改！（为了更好）妮可·沙利文。顺便说一句，关于现代 CSS 优化的一个很好的资源。David Hyatt 撰写的 2000 年过时文章《编写高效 CSS》顶部的注释中引用了该文章。}

\n\n

因此，一些评论者表达的和我分享的对过早优化的担忧可能是有道理的。

\n