html中颜色选择的效率。 RGB vs十六进制与名称 [英] Efficiency of color selection in html. RGB vs hex vs name
问题描述
浏览器可以解析颜色的速度有不同吗？
Is there a difference in the speed a browser can parse a colour?
例如，红色，我可以使用下面的css：
for example, the colour red, i could use the following css:
.red
{
color:red;
color:#ff0000;
color:rgb(255,0,0);
}
这些都产生相同的结果，文本颜色为红色，效率，什么是最好的去？
these all produce the same result, text colour red, but in the sense of efficiency, what is the best to go with?
我意识到使用文本红色是最低字符数，并且为了最小化文档大小是最好的选择，选择？
I realize that using the text 'red', is the lowest character count, and for minimalizing the document size that would be the best to choose, is that what should determine the choice?
我问这个问题的唯一原因是网站上的一切都有不同的颜色，所以如果有一个微小的变化可以增加几毫秒，可能是值得使用最好的方法。
The only reason im asking this is literally everything on a website has varying colours, so if there is a small change that could add to a few miliseconds, it could possibly be worth using the best method.
推荐答案
我认为如果你使用#rrggbb CSS中的颜色散列。
I think it's safe to say that browsers will render pages faster if you use the #rrggbb color hashes in your CSS.
我做了一个超级琐碎的网页，通过CSS在body元素上放置一个背景和前景色，一个超时的页面底部有一个JS输出第一个渲染时间（不幸的是我使用了performance.timing.msFirstPaint值，所以它只会在IE中工作，但你可以从这里得到的gist）。我把页面渲染了十次，取平均值。然后我改变CSS中的颜色名称（绿色和白色），将它们改为十六进制值（＃008000和#fff），并重复测量。使用名称，平均页面呈现 41.6ms ;使用十六进制值： 14.5ms 。考虑到测试页是多么简单，只有两种颜色，我觉得这是一个非常明显的区别。
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>
这篇关于html中颜色选择的效率。 RGB vs十六进制与名称的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
