Jim*_*nks 14 html css performance
浏览器解析颜色的速度是否有差异？
例如,颜色为红色,我可以使用以下css:
.red
{
color:red;
color:#ff0000;
color:rgb(255,0,0);
}
这些都产生相同的结果,文字颜色为红色,但从效率的角度来看,最好的是什么？
我意识到使用文本"红色"是最低的字符数,并且为了最小化最佳选择的文档大小,是什么应该决定选择？
我问这个问题的唯一原因就是网站上的所有内容都有不同的颜色,所以如果有一个小的变化可以增加几毫秒,那么使用最好的方法可能是值得的.
小智 18
我认为如果你在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>Eri*_* J. 13
您将无法在任何非平凡的网页上衡量三个选项的任何差异.
与下载,解析和呈现页面的成本相比,下载和解析几个或更少字节的成本很小.
@Vinny提供的性能测量支持.
我问这个问题的唯一原因就是网站上的所有内容都有不同的颜色
如果您可以优化CSS以便不在许多不同的地方指定颜色(尽可能使用继承的属性),这可能会对整体性能产生更大的影响(下载和解析的CSS更少).
red 是最容易解析的,但需要在表中查找以获取要使用的实际值.
#ff0000 是下一个最容易解析的,需要3个Text - > Int转换才能获得实际值.
rgb(255,0,0) 是最难解析的,仍然需要3 Text - > Int转换才能获得实际值.
第二个可能是总体上最快的,因为该red方法(可能)需要散列操作(另一个Text - > Int转换,而不是我们通常想到的),然后是查找.另外,red令牌可以比较任意长#ff0000.
我不会评论微观优化方面或它的智慧.
| 归档时间： |
|
| 查看次数： |
12189 次 |
| 最近记录： |