更多的CSS，更少的HTML？

哪一种性能更好

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

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

​
.btn{
背景：#555
}
.loginbtn{
填充：10px
}​

或

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

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

​
.btn、.loginbtn{
背景：#555
}
.loginbtn{
填充：10px
}​

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

---

请帮帮我。

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

您可能会得到类似于

10 ms*1/1000

，这将为您提供

10µs

这是一个非常小的性能差异，你必须做同样的事情很多次，然后它才被注意到

所以，你应该使用一个更清晰，更容易维护的

---

就我个人而言，我会选择第一种选择。我发现，如果从类名到规则只有一条路径，而不是将一个类分散在多个规则中，那么更容易看到应用于元素的内容。

这两者之间的差异非常小，我更关心代码的可维护性，也许还有其他问题

---

如果你真的处于这样一个位置：从html中去掉的单个字节带来的好处是非常重要的，那么你可能需要检查一下是否支持CSS类重命名等功能。

你可以使用Google Chrome，打开开发者工具，选择Profiles->Collect CSS selector Profile，看看哪个选择器更快（如果有区别的话）。这不是一个坏问题，如果只是因为缺乏以前研究的细节和参考文献的话。不要让落选让你觉得不一样！好的，谢谢大家，我将使用第一种方法，因为第二种方法，当它变得很大时，会让我头疼。不值得。