search

FortAwesome / Font-Awesome

The iconic SVG, font, and CSS toolkit
https://fontawesome.com
Other
73.54k stars 12.2k forks source link

(FA5 JavaScript) faster node generation using createElementNS #12165

Open jkr2255 opened 6 years ago

jkr2255 commented 6 years ago

Currently (in v5.0.4/js/all.js), icon#node generation relies on HTML parsing of the result of .html; a technique which can be slow.

I tried creating SVG nodes from .abstract using createElementNS, setAttribute and appendChild. It works with 1.6x - 2x spped compared to current implementation (measured by jsPerf).

The conversion function seems to work well (roughly tested in jsFiddle).

P. S. I am creating Riot.js binding of Font Awesome 5, jkr2255/riot-fontawesome. This improvement came to my mind when I was checking the behaviors of the library.

robmadole commented 6 years ago

Fantastic experiment. We'll take this and see how it integrates in.