Search code examples
cssperformancebackgroundbackground-color

Background VS background-color: performance

I was wondering about this, and after a bit of digging, found this resource, linked in this answer.

The resource states:

Background vs background-color

Comparison of 18 color swatches rendered 100 times on a page as small rectangles, once with background and once with background-color.

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

Now, I would imagine background-color being way faster, as the resource thought as well:

I thought that when a browser sees background: #000;, they really see background: #000 none no-repeat top center;. I don't have a link to a resource here, but I recall reading this somewhere.

What gives? Why is background faster than background-color?

Solution

  • Key points from the Github repository you've linked:

    • None of this is super accurate.
    • These are local page load times via file:/// URLs.
    • Nothing is averaged. This is a single page load.
    • The only platform tested is OS X (currently 10.9.1).
    • I'm no developer tools expert (in any browser).
    • Firefox's dev tools are horrible to use and I haven't included them in testing for now.

    Unless you repeat the test thousands if not hundreds of thousands of times across different browsers (and their versions) and operating systems on a variety of different machines, the outcome is pretty meaningless. It could be completely coincidental that a correlation existed between the load times on the different browsers in one instance of testing.

    Furthermore this is a very specific test. It tests Safari 7.0.1 and Chrome 33 on OS X. What about Safari 5.1, 6, 7.0.0? What about Chrome 4, 33, 44? What about Firefox, Opera and Internet Explorer? What about Windows or Linux? And what about mobile devices?

    Your question isn't 'why is background faster than background-color', your question is 'why did one test run on OS X show background being faster than background-color on a specific version of two different browsers'. And that's a question which has countless possibilities.