Menu
Is there a difference in the speed a browser can parse a colour?
for example, the colour red, i could use the following css:
.red
{
color:red;
color:#ff0000;
color:rgb(255,0,0);
}
these all produce the same result, text colour red, but in the sense of efficiency, what is the best to go with?
I realize that using the text 'red', is the lowest character count, and for minimalizing the document size that would be the best to choose, is that what should determine the choice?
The only reason im asking this is literally everything on a website has varying colours, so if there is a small change that could add to a few miliseconds, it could possibly be worth using the best method.
788
I think it's safe to say that browsers will render pages faster if you use the #rrggbb color hashes in your CSS.
I made a super-trivial web page that put a background and foreground color on the body element via CSS, an a little JS at the bottom of the page on a timeout to output the first render time (unfortunately I used the performance.timing.msFirstPaint value, so it will only work in IE, but you can get the gist from this). I rendered the page ten times and took the average. Then I changed the color names ("green" and "white") in the CSS, changed them to hex values (#008000 and #fff) and repeated the measurements. Using names, the page rendered in an average of 41.6ms; using hex values: 14.5ms. Given how simple the test page is, with only two colors, I feel that's a pretty significant difference.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Color name test</title>
<style>body{background-color:green;color:white;}</style>
</head>
<body>
<h1 id="foo"></h1>
<script>
setTimeout(function ()
{
var start = performance.timing.domLoading;
document.getElementById("foo").innerHtml =
performance.timing.msFirstPaint - start;
}, 1000);
</script>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
