浏览器解析颜色的速度有差异吗？
例如，红色，我可以使用以下CSS：
.red
{
color:red;
color:#ff0000;
color:rgb(255,0,0);
}
这些都会产生相同的结果，文本颜色为红色，但从效率的角度来看，什么是最好的搭配？
我意识到使用文本“红色”是最少的字符数，并且为了最小化文档大小，这是最好的选择，这应该决定选择吗？
我问这个问题的唯一原因是网站上的所有内容实际上都有不同的颜色，因此如果有一个小的变化可能会增加几毫秒，那么可能值得使用最好的方法。
我认为可以肯定地说，如果您在 CSS 中使用 #rrggbb 颜色哈希值，浏览器渲染页面的速度将会更快。
我制作了一个超级简单的网页，通过 CSS 在 body 元素上放置背景和前景色，在页面底部放置一点 JS，超时输出第一个渲染时间（不幸的是我使用了 Performance.timing. msFirstPaint 值，所以它会only在 IE 中工作，但你可以从中得到要点）。我渲染了该页面十次并取平均值。然后我更改了 CSS 中的颜色名称（“绿色”和“白色”），将它们更改为十六进制值（#008000 和 #fff）并重复测量。使用名称，页面呈现的平均时间为41.6ms;使用十六进制值：14.5ms。鉴于测试页面非常简单，只需two颜色，我觉得这是一个非常显着的差异。
<!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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
