20

浏览器解析颜色的速度有区别吗？

例如，红色，我可以使用以下 CSS：

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

这些都产生相同的结果，文本颜色为红色，但在效率方面，最好搭配什么？

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

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

4

3 回答 3

23

我认为可以肯定地说，如果您在 CSS 中使用 #rrggbb 颜色哈希，浏览器会更快地呈现页面。

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

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

于 2014-12-17T17:52:49.497 回答
13

您将无法衡量任何重要网页上三个选项的任何差异。

与下载、解析和渲染页面的成本相比，下载和解析更多或更少字节的成本是微不足道的。

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

我问这个的唯一原因实际上是网站上的所有东西都有不同的颜色

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

于 2012-07-23T21:27:19.697 回答
9

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

#ff0000是最容易解析的，需要 3 次 Text -> Int 转换才能获得实际值。

rgb(255,0,0)是最难解析的，仍然需要 3 次 Text -> Int 转换才能获得实际值。

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

我不会评论微优化方面或其智慧。

于 2012-07-23T21:29:59.147 回答