发表新帖
发表新帖

Efficiency of color selection in html. RGB vs hex vs name

后端 未结
关注
3 1950
轻奢々
轻奢々 2021-02-04 04:04

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;
    co
相关标签:
3条回答
  • 悲哀的现实
    2021-02-04 04:14

    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>

    0 讨论(0)
  • 鱼传尺愫
    2021-02-04 04:20

    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).

    0 讨论(0)
  • 面向向阳花
    2021-02-04 04:35

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题