字体真棒版本 3 与 4 图标渲染性能

Question

FontAwesome的作者说，在版本4中，图标渲染速度可以提高30%。我想知道这个数字的细节。

1. 它是否始终快 30%？它变慢了吗？
2. 这个结果是跨浏览器的吗？与移动设备有什么区别吗？
3. 速度的提高仅仅是由于icon- fa fa-类名更改吗？

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

我会查看 Chrome 开发工具的哪一部分？我假设在哪里测量油漆速度？

<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-"].

不幸的是，我无法回答您的其他问题。但希望这部分有用。