CSS 速记效率答案

【问题标题】：CSS Shorthand EfficiencyCSS 速记效率
【发布时间】：2012-07-28 05:34:20
【问题描述】：

background-color: #BADA55;和background: #BADA55;的效率有什么区别？我意识到这很简单，但是浏览器提取每个值的方式是否存在差异。另外，在一个稍微相关的注释中，在CSS3Please 上，我注意到对于线性渐变，他们使用background-image 指定它们。有什么理由不简单地使用background？

【问题讨论】：

如果我告诉你它是 1 微秒，那又有什么关系呢？
我不知道，但是我花了 15 秒阅读这个问题，我再也回不来了 :(
@phD 如果您在具有数百万个单元且每个单元都有自己的 css 的巨大显示设备（墙到墙或体育场显示器）上进行渲染，那将是一个很大的问题交易。
我敢说你在输入这个问题上花费的时间比用一种方式而不是另一种方式花费更多的时间会花费你的用户在你网页的整个历史中。
@srini.venigalla 为什么？无论显示器的大小如何，浏览器都会解释该值。

标签： css performance linear-gradients

【解决方案1】：

规范没有提到浏览器应该如何实现属性解析，特别是速记属性。它只有一个grammar，语法没有说明它的实现。我怀疑，浏览器如何解析速记声明完全取决于实现并且不容易回答（当然，除非你有源代码）。

事实上，我们有大量专门针对 IE 的 CSS hack 的主要原因是它对 CSS 的理解有多么不同（而且通常很差）。

有什么理由不简单地使用background？

答案就在你上一句：

另外，在一个稍微相关的注释上，CSS3Please 我注意到对于线性渐变，他们使用background-image 指定它们。

确实； CSS 渐变被认为是与背景一起使用的图像，并记录在 Image Values module 中。他们应用的各个背景属性是background-image。

如果您使用速记属性仅指定颜色或仅指定渐变，it will use the initial value for the rest of the values。如果使用样式的这种差异很重要，那么性能差异就完全不可能了，因为它不再是一个公平的比较。

在本例中，第二个background 速记声明将完全覆盖第一个，因为background-image 的初始值为none，所以您将得到纯色且没有渐变：

background: radial-gradient(white, rgba(255, 255, 255, 0)) /* transparent */;
background: /* none */ green;

简写符号的目的是在单个声明中指定多个相关属性的值，因此为了同时应用渐变和颜色，应将其重写为：

background: radial-gradient(black, transparent) green;

【讨论】：

【解决方案2】：

你的第二个例子应该是：background: #BADA55;，但无论哪种方式都可以，不应该是你需要担心的事情。

如果您对浏览器如何解析 CSS 感到好奇，我可以告诉您：这取决于（曾经使用过 IE 吗？）。对于 Chrome，您可以查看源代码 on GitHub，而 Firefox 源代码可以找到 here。

【讨论】：