FontAwesome 5 causes high CPU utilization in browser

[hopsoft]

I'm seeing high CPU utilization in Firefox, Chrome, & Safari with FontAwesome 5.

The examples below were captured when a single page was sitting idle. No user activity was taking place, nor was other JavaScript being executed.

Chrome

Chrome typically consumes between 5%-10% CPU when not using FontAwesome 5.

After FontAwesome 5 is added, Chrome consistently consumes between 20%-40% CPU.

Chrome without FontAwesome 5

Chrome with FontAwesome 5

Firefox

Firefox typically consumes between 5%-10% CPU when not using FontAwesome 5.

After FontAwesome 5 is added, Firefox consistently consumes between 40%-60%.

Firefox without FontAwesome 5

Firefox with FontAwesome 5

Safari

Safari typically consumes between 0%-5% CPU when not using FontAwesome 5.

After FontAwesome 5 is added, Safari consistently consumes between 20%-40% CPU.

Safari without FontAwesome 5

Safari with FontAwesome 5

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community.

Sorry, cannot confirm on both my MBPro 2017 i7 and my low end windows machine with a 4th gen i3.

Could you please provide more detail on your architecture?

Could you please provide an example showing this issue?

Could you please check the cpu usage on the following pages:

• https://jsfiddle.net/tagliala/vLae8ted/
• https://ruby2-rails5-bootstrap-heroku.herokuapp.com/

[hopsoft]

Here's the system I'm testing with.

[hopsoft]

The JSFiddle performs well with low CPU usage on my setup. https://jsfiddle.net/tagliala/vLae8ted/

[hopsoft]

The starter app also performs well with low CPU usage on my setup. https://ruby2-rails5-bootstrap-heroku.herokuapp.com/

[hopsoft]

The app in question is a pretty standard Rails 5.2 application. It's using both Turbolinks & StimulusJS.

Here's the package.json that I'm using on the app that's manifesting high CPU with FontAwesome 5.

{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.3",
    "@fortawesome/fontawesome-free-regular": "^5.0.6",
    "@fortawesome/fontawesome-free-solid": "^5.0.6",
    "@rails/webpacker": "^3.0.2",
    "animate.css": "^3.5.2",
    "chart.js": "^2.7.1",
    "coffeescript": "1.12.7",
    "jquery": "^3.3.1",
    "noty": "^3.1.4",
    "popper.js": "^1.12.9",
    "postcss-smart-import": "^0.7.6",
    "select2": "^4.0.5",
    "stimulus": "^1.0.1",
    "webpack-merge": "^4.1.1"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.9.4"
  }
}

I'll start experimenting with removing various dependencies to see if any aren't playing well with FontAwesome 5 in terms of high CPU.

[hopsoft]

I've removed all dependencies and am still seeing the high CPU usage. Here's what my package.json looks like now.

{
  "name": "myapp",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.3",
    "@fortawesome/fontawesome-free-regular": "^5.0.6",
    "@fortawesome/fontawesome-free-solid": "^5.0.6",
    "@rails/webpacker": "^3.0.2",
    "postcss-smart-import": "^0.7.6",
    "webpack-merge": "^4.1.1"
  },
  "devDependencies": {
    "webpack-dev-server": "^2.9.4"
  }
}

I've also disabled the following items.

• All Rails asset pipeline JavaScript assets... including
  • Rails UJS
  • Turbolinks
  • All custom JavaScript
• All custom Webpack configuration
• All custom Webpack(er) JavaScript that does anything other than import FontAwesome
• The listen gem
• The bootsnap gem
• The better_errors gem

Here is the only custom JavaScript file that is being loaded now.

// fontawesome
import '@fortawesome/fontawesome';
import '@fortawesome/fontawesome-free-solid';
import '@fortawesome/fontawesome-free-regular';

Unfortunately, I'm still seeing the reported high CPU.

Note that the high CPU utilization goes away immediately if I comment the FontAwesome lines above.

I'm not really sure how to proceed from here.

[hopsoft]

As a last ditch debugging effort, I attempted loading only portions of FontAwesome & have discovered that the problem only manifests when importing fontawesome-free-solid.

import '@fortawesome/fontawesome-free-solid';

If I omit the import statement above, CPU utilization remains low.

Here's the JavaScript file that works as desired.

// fontawesome
import '@fortawesome/fontawesome';
//import '@fortawesome/fontawesome-free-solid';
import '@fortawesome/fontawesome-free-regular';

[hopsoft]

Unfortunately most of the icons I'm using are defined in fontawesome-free-solid

[hopsoft]

Apparently the low CPU consumption was simply a manifestation that my app primarily uses fontawesome-free-solid. Once I changed the icons over to their fontawesome-free-regular variants I'm seeing the high CPU again. 😢

[hopsoft]

I've improved things a bit. I had some hidden icons on the page with fa-spin that are only shown under certain circumstances. CPU usage has dropped by about 10% by removing fa-spin from those icons.

[hopsoft]

I also had a malformed icon that was getting replaced by the nifty animating exclamation. Fixing that icon & removing all icon animations has resolved the high CPU utilization problem.

[hopsoft]

The lesson here is to avoid animated icons whenever possible.

[tagliala]

@hopsoft thaks for all the updates!

I also had a malformed icon that was getting replaced by the nifty animating exclamation. Fixing that icon & removing all icon animations has resolved the high CPU utilization problem.

You mean FA5's animated icons for missing icons?

That could be documented

[hopsoft]

@tagliala Yes it was FA5's animated icons for missing icons.

[georgesmarkus]

I am having the similar issue (no animated icons) , CPU utilisation is around 20% whenever I add this
" to the index.htm

any suggestion please

[tagliala]

@georgesmarkus could you please provide a reproducible test case?

[mikerockett]

Just bumped into this as well. Initially, it was happening when the placeholder icon was showing (for non-resolvable icons), but it seems to be continuing when they've all resolved. Any way to figure out the root cause here?

For reference, Google Chrome Helper spikes to upwards of 100% on my MacBook Pro, with User usage averaging 25% and fans going crazy. Interestingly, this only happens on one page in my SPA. If I navigate away (Vue Router), the usage perists. But, if I hard refresh on that exact page I went away to, usage drops to normal. Very weird.

Update: Screenie

Update: Usage

In case its needed: I'm using Vue CLI 2 with the latest Vue and latest dependencies. Node 10 and NPM 6. I'm loading the entire library with fas, far, and brands.

[mikerockett]

Update: Turns out this particular case was actually another component causing me grief. That said, CPU usage did spike when the placeholder icon was visible, but on a different page.

[luchaos]

Still the case as soon as the animated placeholder is shown.

To have a more quiet time and a happier CPU while fixing all those missing icons just turn it off via config or remove the SMIL animation tags:

import { config, library, dom } from '@fortawesome/fontawesome-svg-core'

// will give you handy errors in the brower's console, or...
config.showMissingIcons = false;

// ... have replacements shown but without animation
dom.i2svg().then(() => {
    var elements = document.getElementsByTagName('animate');
    while (elements[0]) elements[0].parentNode.removeChild(elements[0]);
});

[tagliala]

@luchaos how many missing icon are you showing in the page?

In my case, just a single icon brings my old and slow 4th gen i3 cpu up at 10%

I'm starting to think that disabling the missing icon animation by default in production environments could be a good idea

Anyway, the high cpu usage should be somehow documented for developers

[luchaos]

@tagliala there were about 20 missing of several hundreds per page, bringing my i7 to 60% - but just a single occurrence caused a constant 15-20% usage as well. I have now switched to the webfont variant again as i wasn't using any SVG+JS features and the amount of icons i use per page is not suitable for this method as is pointed out in the documentation.