Efficiency Of Color Selection In Html. Rgb Vs Hex Vs Name
Solution 1:
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><metacharset="utf-8" /><title>Color name test</title><style>body{background-color:green;color:white;}</style></head><body><h1id="foo"></h1><script>setTimeout(function ()
{
var start = performance.timing.domLoading;
document.getElementById("foo").innerHtml =
performance.timing.msFirstPaint - start;
}, 1000);
</script></body></html>Solution 2:
You will be unable to measure any difference in the three options on any non-trivial web page.
The cost of downloading and parsing a few more or a few less bytes is tiny compared to the cost of downloading, parsing and rendering the the page.
The performance measurements provided by @Vinny support that.
The only reason im asking this is literally everything on a website has varying colours
If you can optimize your CSS so as to not specify the color in many different places (use inherited properties where you can), that is likely to have a larger impact on overall performance (less CSS to download and parse).
Solution 3:
red is the easiest to parse, but will require a lookup in to table to get the actual value to be used.
#ff0000 is the next easiest to parse, requires 3 Text -> Int conversions to get the actual value.
rgb(255,0,0) is the most difficult to parse, and still requires the 3 Text -> Int conversions to get the actual value.
The second is likely the fastest overall since the red method (likely) requires a hashing operation (another Text -> Int conversion, just not what we normally think about), and then the lookup. Also the red token can be arbitrarily long compared to #ff0000.
I won't comment on the micro-optimization aspect or its wisdom.
Post a Comment for "Efficiency Of Color Selection In Html. Rgb Vs Hex Vs Name"