背景 VS 背景颜色：性能答案

【问题标题】：Background VS background-color: performance背景 VS 背景颜色：性能
【发布时间】：2015-11-29 04:49:02
【问题描述】：

我对此感到疑惑，经过一番挖掘，找到了this resource，链接在this answer。

资源状态：

背景与背景颜色

18 个色样在一个小页面上呈现 100 次的比较矩形，一次带有背景，一次带有背景色。

| -------------------------------------------- |
| Page             |  Safari 7.0.1 | Chrome 33 |
| -----------------|-------------------------- |
| background       |  44.9ms       | 34.45ms   |
| -----------------|-------------------------- |
| background-color |  87.5ms       | 69.34ms   |
| -------------------------------------------- |

现在，我想background-color 会更快，正如资源所认为的那样：

我认为当浏览器看到background: #000; 时，他们真的看到了background: #000 none no-repeat top center;。我这里没有资源链接，但我记得在某处读过这篇文章。

什么给了？为什么background 比background-color 快？

【问题讨论】：

标签： css performance background background-color

【解决方案1】：

您链接的 Github 存储库中的关键点：

这些都不是超级准确的。

这些是通过 file:/// URL 的本地页面加载时间。

没有进行平均。 这是单页加载。

测试的唯一平台是 OS X（当前为 10.9.1）。

我不是开发工具专家（在任何浏览器中）。

Firefox 的开发工具使用起来很糟糕，我暂时没有将它们包括在测试中。

除非您在各种不同机器上的不同浏览器（及其版本）和操作系统上重复测试数千甚至数十万次，否则结果毫无意义。在一个测试实例中，不同浏览器上的加载时间之间存在相关性可能完全是巧合。

此外，这是一项非常具体的测试。它在 OS X 上测试 Safari 7.0.1 和 Chrome 33。Safari 5.1、6、7.0.0 怎么样？ Chrome 4、33、44 怎么样？ Firefox、Opera 和 Internet Explorer 怎么样？ Windows 或 Linux 呢？那么移动设备呢？

您的问题不是'为什么 background 比 background-color 快'，您的问题是 '为什么在 OS X 上运行的一项测试显示 background 比background-color 在两个不同浏览器的特定版本上'。这是一个有无数可能性的问题。

【讨论】：