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個嵌套類。因此，對於每個元素，瀏覽器必須匹配選擇器三次以應用所有規則。首先是邊距，然後是填充，然後應用顏色。第二種方法似乎非常昂貴。

來源

2017-08-24 kali187

此外，分組被採取到一個非常極端的水平。不按類似元素的邏輯進行分組，但實際上所有元素具有相同的規則值。在我看來，它是過度的。 – kali187

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

集團。這使得你的CSS文件整齊清晰。它也提高了您的渲染性能。一次又一次地寫同樣的東西並不是一個好習慣。

來源

2017-08-24 09:32:04

我知道方法2的乾淨代碼好處，加上似乎更幹。但我的問題是關於實際的瀏覽器性能和渲染影響。有沒有人測量這個確切的東西？ – kali187

選擇器匹配可能很昂貴。在現實生活中，每個選擇器不只是一個類，而是2-3個嵌套類。因此，對於每個元素，瀏覽器必須匹配選擇器三次才能應用所有規則。首先是邊距，然後是填充，然後應用顏色。看起來很貴。 – kali187

如果您在許多地方的項目中具有相同的屬性，請添加該類。或組。

來源

2017-08-24 10:43:41 PerniCZek

我知道。我想知道性能影響。顯然廣泛的分組會影響性能。 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倍）

如果有人想測試它，請做

來源

2017-08-24 10:52:21 kali187

CSS性能 - 分組還是不分組？

回答

相關問題