Question

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

考虑以下图片：

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

而所有数字都代表一个独特的属性。 e.g：

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和10个类的DOM对象！

假设哪些CSS代码最优化？ （适用于现代浏览器） 你应该限制每个DOM对象的classess数量吗？你喜欢一个包含类＆＃34;的单一属性吗？将它添加到ID？

P.S。 作为测试我使用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优化。这将有效地减少您的总体加载时间，并使您的代码在未来可读和可维护。

Answer 2

浏览器应该在内部进行任何此类优化，因为它们“编译”CSS。编译器负责优化，因为它知道它的实现细节，并且能够告诉它最适合它的需求。

程序员只关心编译器无法推断的事情（例如由于无法解决halting problem）。否则，编写语义正确的代码是他们最好的选择。

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

我的观点是作者不应该担心优化选择器（从我看到的，他们通常不会），这应该是引擎的工作。

^{由Nicole Sullivan通过CSS Selector Performance has changed! (For the better)引用。关于现代CSS优化的一个很好的资源，BTW。 David Hyatt在2000年过时的文章Writing efficient CSS顶部的说明中引用了该文章。}

因此，有些评论者表达了对premature optimization的关注并且与我分享，这可能是必要的。

Answer 3

我正在考虑的一个挫折是响应能力。我们以此代码为例：

HTML：

<ul class="overflowHidden blackOnePixelBorder resetPadddingAndMargin noListStyle">
    <li class="backgroundGreen floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundRed floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundBlue floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundRed floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundBlue floatLeft threePerRow heightTwoHunderPixels"></li>
    <li class="backgroundGreen floatLeft threePerRow heightTwoHunderPixels"></li>
</ul>

CSS：

.resetPadddingAndMargin {
    padding: 0;
    margin: 0;
}
.noListStyle {
    list-style: none;
}
.overflowHidden {
    overflow: hidden;
}
.blackOnePixelBorder {
    border: 1px solid #000;
}
.backgroundRed {
    background: #f00;
}
.backgroundGreen {
    background: #0f0;
}
.backgroundBlue {
    background: #00f;
}
.floatLeft {
    float: left;
}
.threePerRow {
    width: 33.33%;
}
.heightTwoHunderPixels {
    height: 200px;
}

http://jsfiddle.net/bqh8he7e/

如果要在一行中包含所有正方形，如果要在不同的分辨率或设备中使用一个类而不覆盖它，您将如何解决重叠CSS代码的问题？（*没有JS）

（我希望我理解你的想法）

最优化的浏览器CSS

3 个答案: