1

Icon packs like font-awesome or icoMoon use pseudo-elements to change the content of an element tag. I'd like to know if there is a performance advantage in using the unicode directly instead of passing through the pseudo element :

<i class="cursor icon-envelope"></i>
<i class="cursor">&#xf003;</i>

.icon-envelope-o:before {
    content: "\f003";
}

How can I possibly test it ? Can I see somewhere in the dev console if one or the other takes more time ? My reasoning is that there is less process being done when inserting the unicode character directly. If I can gain say 10 ms I think it's worth it (I've no clue if that number is even remotely realist lol, my guess is that it's much much less than that).

Ced
  • 15,847
  • 14
  • 87
  • 146
  • You could probably do something like this http://stackoverflow.com/questions/14048825/is-there-a-definitive-way-to-measure-time-to-paint-for-performance – user193661 Nov 25 '15 at 04:10

0 Answers0