CAGradient vs UIImage gradient performance comparison

It’s a popular myth that CAGradient is slow and we should use UIImage gradients instead of it. Let’s check it out.

TL&DR: CAGradient with shouldRasterize = NO has same performance as UIImage and faster than CAGradient with shouldRasterize = YES.

In first experiment to compare their speed I have created sample project with UITableView and gradient inside each UITableViewCell. Each cell redraw their gradients in prepareForDisplay so we can measure render time.

There are three types of gradients:

TableView with gradients inside cells

• CAGradientLayer (red color)
• CAGradientLayer with shouldRasterize == YES (green color)
• UIImage gradient (black color)

I measured each table view mode with Core Animation profiler on my slowest devices. Here is average fps:

iPhone 5 iOS8 results: CAGradient — 56.7 fps, CAGradient rasterized — 47 fps, UIImage — 56 fps.

iPhone 6+ iOS10 results: CAGradient — 54.75 fps, CAGradient rasterized — 45.6 fps, UIImage — 53.57 fps.

In the next experiment I measured regular table view scrolling fps under full screen gradient. Same types, same colors.

Table view with gradient above

Results:

iPhone 5 iOS8: CAGradient — 44.6 fps, CAGradient rasterized — 45.25 fps, UIImage — 46.84 fps.

iPhone 6+ iOS10: all gradient types — 55 fps.

In my projects I prefer using CAGradient because you don’t have redundant images in assets, it decrease app size and you are not depend on designer.

You can leave your test case ideas in the comments below. Demo project placed here on github.