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