CSS - 哪种代码渲染更快且更有效？

Question

我想知道以下哪个代码能更快地渲染且更有效：

这个 -

body{background:#ddd;font-family:verdana;font-size:12px;color:#808080;}
a{color:#808080;outline:0;text-decoration:none;}
input{margin:0;padding:0;font-family:verdana;color:#808080;}
ul{padding:0;margin:0;}

这个 - 或者这个 -

body,input{font-family:verdana}
body,input,a{color:#808080;}
body{background:#ddd;;font-size:12px;}
a{outline:0;text-decoration:none;}
input,ul{margin:0;padding:0;}

- dinbrca

Answer 1

效率在这里是无关紧要的。

选择易于阅读/理解/维护的那个，显然第一个代码片段更好。

不过，第二个代码片段看起来像已经被压缩了，这是一个好事情，因为它可以减少CSS的传输大小 - 但它并不能提高“渲染速度”。

你应该用最易懂的方式编写CSS，然后在上线时生成压缩版本。

- thirtydot

---

渲染效率在这里是无关紧要的吗？ 请查看以下网站： http://forr.st/posts/CSS_Rendering_Speed_Grouping_Selectors_vs_Prop-T4S 他们说代码2可能会更快地呈现-为什么？因为它具有较少的选择器。 很可能缩小的代码更好，因为呈现速度取决于浏览器速度和计算机速度。 结论-哪种方法更好取决于四个因素-计算机速度、浏览器速度和互联网连接（这些与程序员无关，但主要取决于CSS元素的数量，我是对的吗？ - dinbrca

我没有任何数字（我只是不太在意基准测试），但这在这里是无关紧要的，因为差异（对于平均大小的页面）可能不到一毫秒。可以产生稍微更大差异的是编写高效选择器。所以请记住选择器的效率并压缩您的CSS（仅为了减少传输大小）。当涉及到CSS“性能”时，99％的网站不需要更多东西。 - thirtydot

Answer 2

我从未见过 CSS 有任何性能问题，除了一件事。当你在某些情况下使用 * 时，你的 JavaScript 可能会变得非常缓慢。

- Wojciech Bednarski