Question

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>

Answer 1

虽然不是一个充分的答案，但我认为大多数性能改进都会对移动设备产生更大的影响，因为它们起步较慢。例如。 100毫秒 - ＆gt; 50ms和800ms - ＆gt; 400毫秒都减少了50％，但后者将被认为更大（并且绝对数字也是如此）。但是，这是通用的，我说是否特别是Fontawesome或CSS渲染的情况。
我很确定加速的主要原因是使用了类选择器而不是属性选择器。例如。 .icon.icon-name代替[class^="icon-"], [class*=" icon-"]。

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

FontAwesome版本3与4图标渲染性能

1 个答案: