css - 更多的 CSS，更少的 HTML？

Question

哪个性能更好？

<a class="btn loginbtn" href="#">Login</a>

.btn {
    background: #555 
}
.loginbtn {
    padding: 10px
}

或者

<a class="loginbtn" href="#">Login</a>

.btn,.loginbtn {
    background: #555  
}
.loginbtn {
    padding: 10px     
}

由于我的 CSS 将被缓存，我认为第二个会更好。

请帮帮我。

score 2 · Accepted Answer

您可以计算由文件大小差异引起的平均性能差异，即获取更多 TCP/IP 包所需的时间乘以由于该更改而发生的概率（即包大小除以添加的字符数）。

你可能会得到类似的东西10 ms * 1/1000，这会给你10 µs。

这是一个很小的性能差异，以至于您必须多次制作相同的东西才能引起注意。

因此，您应该使用更清晰、更易于维护的那个。

我个人会选择第一个选项。如果从类名到规则只有一条路径可以遵循，而不是让一个类分散在多个规则中，我发现更容易查看应用于元素的内容。

score 0 · Accepted Answer

两者之间的差异将非常微不足道，我会更关心代码可维护性和可能选择器性能。

如果您真的处于从 html 中删除的单个字节的好处加起来很重要的位置，您可能需要检查支持 CSS 类重命名的闭包样式表等。

2 回答 2