哪个更快：十六进制颜色代码或颜色名称？

Posted 2023-02-23

【中文标题】哪个更快：十六进制颜色代码或颜色名称？

【英文标题】：which one is faster: hex color codes or color names?

【发布时间】：2011-10-02 04:55:40

【问题描述】：

我只是想知道在 CSS 中使用十六进制颜色代码或颜色名称是否更快？

【问题讨论】：

摘下挂在最低处的果实。说真的，在这成为问题之前，您应该优化几乎所有其他内容。

是的，我知道我应该优化其他所有内容。这只是我脑后想知道的事情。

从浏览器设计的角度来看，这是一个有趣的问题，而不是从网络优化的角度来看。

【参考方案1】：

我将违背普遍的共识，并建议如果查找表将颜色值作为整数返回，颜色名称可能会更快。这意味着当使用命名颜色时，浏览器不必手动将包含十六进制字符的字符串解析为相应的整数，它所需要做的只是 O(1) 哈希查找。这可能比从字符串解析为整数要快一些。

尽管正如其他人正确指出的那样，但实际上两者之间的差异将非常小。不是你在实践中会注意到的。

【讨论】：

嗯，有趣的一点。您的回答表明，即使在最不重要和最小的事情上，也可能存在很多分歧。

我没想到。我敢打赌，有些浏览器完全按照你说的做——而其他浏览器则不然。这就引出了另一个问题：名称查找是否也比 3 位十六进制转换更快，还是仅比 6 位十六进制颜色快？！嗯！

【参考方案2】：

我的猜测是代码会更快，因为名称可能已分配给查找表并参考十六进制代码。

话虽如此，我的猜测是速度差异将完全可以忽略不计。

这是我刚刚创建的性能测试。它们是并驾齐驱的，尽管到目前为止，十六进制代码在 4/5 次运行中似乎只快不了多少： http://jsperf.com/css-color-names-vs-hex-codes

【讨论】：

是的，这是我的猜测，是的，我知道这并没有什么不同，但我只是想确定一下。

这里是a revision of that test，比较短十六进制代码 (#FFF)、长十六进制代码 (#FFFFFF)、rgb、rgba 和颜色代码。

【参考方案3】：

在渲染方面更快？

实际上，它不可能有任何改变。

从技术角度来说，这取决于 CSS 渲染在每个浏览器中的实现方式。如果我不得不猜测，我想在大多数浏览器中使用十六进制会快大约 3 个 CPU 周期（有点夸张），因为名称必须先转换为十六进制。

但是，自互联网发明以来，您提出问题所花费的时间比世界上所有浏览器在进行此转换所浪费的时间还要多。

【讨论】：

原则上我同意你的观点，但“3 个 cpu 周期”的说法似乎很糟糕......要将名称转换为其数字等价物，您需要在 n 的查找表中找到它的条目平均需要 (log n)/2 次尝试的条目；每次尝试将花费超过 3 个 CPU 周期来找到实际条目，然后执行字符串比较。话虽如此，即使转换需要 30000 个 CPU 周期，用户也不会看到任何差异。

抱歉，我想在我的“3 个 CPU 周期”图中添加一个旁注，但我忘记了。我意识到这是夸大其词。我已经更新了答案:)

我对浏览器的内部结构一无所知，但是一个非常简单的 O(1) 散列似乎更适合这项任务。