html - FontAwesome 版本 3 对比 4 图标渲染性能

Question

FontAwesome作者说在第 4 版中图标渲染最多可以快 30%。我想知道这个数字的细节。

1. 是否始终快 30%？它有没有变慢？
2. 这个结果是跨浏览器的吗？跟手机有区别吗？
3. 速度的提升仅仅是因为 icon- 到 fa fa- 类名的改变吗？

为了解决这些问题，我想对图标渲染速度进行基准测试。我制作了以下 JSFiddle，并且非常熟悉浏览器开发工具(尤其是 Chrome)，这就是它所使用的吗？ http://jsfiddle.net/timrpeterson/Q5TA5/2/

我会查看 Chrome 开发工具的哪一部分？我假设在哪里 paint speed是测出来的吗？

<div>

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <h3> v4.0.3</h3>
       <i class='fa fa-comment'></i>
       <i class='fa fa-envelope'></i>
</div>
<hr>
<div>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <h3> v3.2.1</h3>
 <i class='icon-comment'></i>
 <i class='icon-envelope'></i>
</div>

Answer 1

1. 虽然这不是一个充分的答案，但我想说大多数性能改进对移动设备的影响更大，因为它们开始时速度较慢。例如。 100ms -> 50ms 和 800ms -> 400ms 都是 50% 的减少，但后者会被认为更大(而且在绝对数字上也是如此)。但是，这是一般情况，我说的是 Fontawesome 或 CSS 渲染是否属于这种情况。

2. 我很确定加速的主要原因是使用了类选择器而不是属性选择器。例如。 .icon.icon-name 而不是 [class^="icon-"],
[class*="icon-"].

很遗憾，我无法回答您的其他问题。但希望这部分有用。