CSS3 filter performance & CPU usage: Why do certain filters tax the CPU?

Question

Consider this demo from David Nuon:

http://zunostudios.com/demos/css32014-demos/filters.html

As David notices in his post:

You\'ll no

Answer 1

You'll notice that the only time the performance is hit hard is when you either use blur or drop-shadow. If you play with any of the other filters there is very little cpu usage or any indication of a performance hit.

The first thing to understand is that not all filters are created equal.

Most filters modify pixels on a 1:1 level which is a relatively straight forward calculation.

However when you introduce anything with a "blur" or "shadow" it may no longer be a 1:1 calculation.

Say you use the radius parameter and set it to 5px. You now need to look at 5x the amount of pixels to calculate what the blur should look like.

When you compound this with other filters on top of this the calculation required increases.

Modern browsers are able to utilize the GPU to help with these calculations to make the process faster but you'll notice devices with weak GPU's suffering.

So to answer your question specifically. The CPU isn't running after the filter is applied, it's actually still in the process of calculating! When you put in crazy values like the example allows you to (e.g. a radius of 100px) you can imagine how intensive that calculation will be on the CPU.

Here is a quick guideline on performance for CSS filters:

• grayscale / fast
• sepia / fast
• saturate / fast
• hue-rotate / fast
• invert / fast
• opacity / variable
• brightness / fast
• contrast / fast
• blur / slow
• drop-shadow / slow
• url() / variable

Answer 2

The main problem with this "app" is painting. And if you apply some filter effects, or even go crazy with the slider, you are actually killing CPU with computationally expensive operations which are perfectly intended for GPU. It is very good at this stuff. If you use timeline tool and trace your app you will see massive green bars which indicates painting and painting is happening on the main thread(CPU). What you need to do is to manually promote elements that use these filter effects to a layer. You can do that with some hacks like transform: translateZ(0); or new will-change: transform; and after that you will see massive improvement in responsiveness of your app. But on mobile devices generation 2012 and below you can forget good performance, this is just too much for them.

Try to add this code through the dev tools and observe the result, if it is not faster let me know ?

 img#image {
  transform: translateZ(0); /*for older browsers*/
  will-change: transform;
}