Question

浏览器解析颜色的速度是否存在差异？

例如，颜色为红色，我可以使用以下css：

.red
{
    color:red;
    color:#ff0000;
    color:rgb(255,0,0);
}

这些都产生相同的结果，文字颜色为红色，但从效率的角度来看，最好的是什么？

我意识到使用文本“红色”是最低的字符数，并且为了最小化最佳选择的文档大小，应该决定选择的是什么？

我问这个问题的唯一原因就是网站上的所有内容都有不同的颜色，所以如果有一个小的变化可以增加几毫秒，那么使用最好的方法可能是值得的。

Answer 1

我认为如果你在CSS中使用#rrggbb颜色哈希值，浏览器会更快地渲染页面是安全的。

我制作了一个超级平凡的网页，通过CSS将一个背景和前景色放在body元素上，在页面底部有一个小JS，在超时时输出第一个渲染时间（不幸的是我使用了性能） .timing.msFirstPaint值，因此它将仅在IE中工作，但你可以从中获得要点）。我渲染了十次页面并取平均值。然后我在CSS中更改了颜色名称（＆＃34;绿色＆＃34;和＆＃34;白色＆＃34;），将它们更改为十六进制值（＃008000和#fff）并重复测量。使用名称，页面平均呈现 41.6ms ;使用十六进制值： 14.5ms 。考虑到测试页面的简单性，只有两种颜色，我觉得这是一个非常显着的差异。

＆＃13;

<!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>

＆＃13;

Answer 2

您将无法衡量任何非平凡网页上三个选项的任何差异。

与下载，解析和呈现页面的成本相比，下载和解析更多或更少字节的成本很小。

@Vinny提供的性能测量支持。

我问这个问题的唯一原因就是网站上的所有内容都有不同的颜色

如果您可以优化CSS以便不在许多不同的地方指定颜色（尽可能使用继承的属性），这可能会对整体性能产生更大的影响（下载和解析的CSS更少）。 / p>

Answer 3

red是最容易解析的，但需要在表中查找才能获得要使用的实际值。

#ff0000是下一个最容易解析的，需要3个文字 - ＆gt; Int转换以获得实际值。

rgb(255,0,0)是最难解析的，仍需要3个文字 - ＆gt; Int转换以获得实际值。

第二个可能是总体上最快的，因为red方法（可能）需要散列操作（另一个Text - ＆gt; Int转换，而不是我们通常想到的），然后是查找。与red相比，#ff0000令牌可以任意长。

我不会对微观优化方面或其智慧发表评论。

html中颜色选择的效率。 RGB vs hex vs name

3 个答案: