CSS性能 - 分组还是不分组？

问题描述：

我在想，解析和渲染性能可能会对CSS中的规则有什么影响。CSS性能 - 分组还是不分组？

方法1：

.class1 { 
    margin: 10px; 
    padding: 20px; 
    color: #ccc; 
} 
.class2 { 
    margin: 10px; 
    padding: 30px; 
    color: #ddd; 
} 
.class3 { 
    margin: 20px; 
    padding: 30px; 
    color: #eee; 
} 
.class4 { 
    margin: 20px; 
    padding: 20px; 
    color: #fff; 
}

VS approach2：

.class1, 
.class2 { 
    margin: 10px; 
} 
.class3, 
.class4 { 
    margin: 20px; 
} 
.class1, 
.class4 { 
    padding: 20px; 
} 
.class2, 
.class3 { 
    padding: 30px; 
} 
.class1 { 
    color: #ccc; 
} 
.class2 { 
    color: #ddd; 
} 
.class3 { 
    color: #eee; 
} 
.class4 { 
    color: #fff; 
}

当然，我们说的是用同样的规则分组大css文件，所以同样的选择有时会裂成许多块。

它是否会影响css解析和渲染，足以放弃这种方法来支持更大的文件，但更干净并在一个选择器中收集所有规则？

选择器匹配可能很昂贵。在现实生活中，每个选择器不只是一个类，而是2-3个嵌套类。因此，对于每个元素，浏览器必须匹配选择器三次以应用所有规则。首先是边距，然后是填充，然后应用颜色。第二种方法似乎非常昂贵。

此外，分组被采取到一个非常极端的水平。不按类似元素的逻辑进行分组，但实际上所有元素具有相同的规则值。在我看来，它是过度的。 – kali187

overDRYing也是一个不好的做法 http://joelabrahamsson.com/the-dry-obsession/ – kali187

答

集团。这使得你的CSS文件整齐清晰。它也提高了您的渲染性能。一次又一次地写同样的东西并不是一个好习惯。

我知道方法2的干净代码好处，加上似乎更干。但我的问题是关于实际的浏览器性能和渲染影响。有没有人测量这个确切的东西？ – kali187

选择器匹配可能很昂贵。在现实生活中，每个选择器不只是一个类，而是2-3个嵌套类。因此，对于每个元素，浏览器必须匹配选择器三次才能应用所有规则。首先是边距，然后是填充，然后应用颜色。看起来很贵。 – kali187

答

如果您在许多地方的项目中具有相同的属性，请添加该类。或组。

我知道。我想知道性能影响。显然广泛的分组会影响性能。 P.S.我们不能添加视觉类。我们使用BEM而不是OOCSS – kali187

答

我已经准备了两个codepens有两个选项：

方法1（每类中的一个选择器） - https://codepen.io/kali187/pen/EvpVdb - （只是输出：https://codepen.io/kali187/live/EvpVdb）

@for $n from 1 through 2000 { 
    .div-#{$n} { 
     float: left; 
     background: rgb($n, $n, $n); 
     height: 10px + 1px * $n/2; 
     width: 20px + 1px * $n/5; 
     margin: 0 1px 1px 0; 
     border: 1px solid #f00; 
    } 
}

方法2（多个选择为一类） - https://codepen.io/kali187/pen/dzjGPa - （只是输出：https://codepen.io/kali187/live/dzjGPa）

$max: 1000; 

@for $i from 1 through $max { 
    %bg-#{$i} { 
    background: rgb($i, $i, $i); 
    } 
    %width-#{$i} { 
    width: 20px + 1px * ceil($i/5); 
    } 
    %height-#{$i} { 
    height: 20px + 1px * ceil($i/3); 
    } 
} 

@for $n from 1 through (2*$max) { 
    .div-#{$n} { 
     float: left; 
     @extend %bg-#{ceil($n/2)}; 
     @extend %width-#{ceil($n/3)}; 
     @extend %height-#{ceil($n/4)}; 
     margin: 0 1px 1px 0; 
     border: 1px solid #f00; 
    } 
}

呈现为第一种方法的个

结果：解析样式和HTML〜25ms的

渲染用于第二方法的结果：解析样式和HTML〜75ms（即长的3倍）

如果有人想测试它，请做

CSS性能 - 分组还是不分组？

相关推荐