Icon-fonts方案对比：ligatures连字与font-classes的浏览器性能差异

核心结论 #

依赖CSS类映射的font-classes方案浏览器性能表现优于ligatures连字方案，直接使用字符码的方案是三者中性能最优的，三者的性能排序为：字符码直写方案 > font-classes方案 > ligatures连字方案

性能差异原因分析 #

• ligatures连字方案的额外开销 #

  浏览器渲染连字时，需要先扫描节点内的文本内容，再和字体文件内置的连字规则表做遍历匹配，才能将连续的字符组合替换为对应的图标字形，文本匹配和替换的过程会产生额外的排版计算成本，页面图标数量越多，开销越明显。
  该方案的写法示例：

  <i class="icon">arrow-left</i>
  

• font-classes方案的开销极低 #

  font-classes一般是通过类名匹配对应的CSS规则，再由::before/::after伪元素注入对应图标字符码，CSS类选择器匹配是浏览器已经做了深度优化的能力，哪怕存在上百个图标类，匹配成本也可以忽略不计，远低于连字的文本匹配开销。
  该方案的写法示例：

  <i class="fa fa-arrow-left"></i>
  

• 字符码直写方案性能最优的原因 #

  该方案直接在节点内写入图标对应的Unicode字符码，浏览器不需要做连字匹配，也不需要处理伪元素的规则匹配和内容注入，直接读取字符码匹配字体中的对应字形渲染，路径最短所以性能最高。
  该方案的写法示例：

  <i class="icon">&#61023;</i>
  

  但该方案的缺陷也非常明显：需要严格保证迭代过程中旧图标的字符码不变，开发者需要记忆或查询字符码映射表，且特殊字符在大多数编辑器中无法正常预览，代码可读性极低。

方案选择建议 #

• 如果对性能要求极致敏感，且可以接受开发体验的下降，可以选择字符码直写方案
• 如果追求平衡，font-classes方案是兼容性、开发体验、性能三者的最优解
• 如果优先追求开发体验和代码可读性，且页面图标数量不多，可以选择ligatures连字方案

内容的提问来源于stack exchange，提问作者Artisan72