FontAwesome 版本 3 vs. 4 图标渲染性能答案

【问题标题】：FontAwesome version 3 vs. 4 icon rendering performanceFontAwesome 版本 3 vs. 4 图标渲染性能
【发布时间】：2013-11-29 19:59:53
【问题描述】：

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

是否始终快 30%？它会变慢吗？
此结果是否跨浏览器？和手机有区别吗？
速度提升仅仅是因为将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>

【问题讨论】：

标签： html css icons google-chrome-devtools font-awesome

【解决方案1】：

虽然不是一个充分的答案，但我想说大多数性能改进对移动设备的影响更大，因为它们开始时速度较慢。例如。 100ms -> 50ms 和 800ms -> 400ms 都减少了 50%，但后者会被认为更大（在绝对数字上也是如此）。但是，这是一般情况，我说的是 Fontawesome 还是 CSS 渲染尤其如此。
我很确定加速的主要原因是使用了类选择器而不是属性选择器。例如。 .icon.icon-name 而不是 [class^="icon-"], [class*=" icon-"]。

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

【讨论】：