Color Blending and Off-Screen Rendering in Swift
Improve performance for older iPhones
Both color blending and off-screen rendering are an unheeded topic for iOS development owing to the power of iPhones.
On the other hand, it is not only a hot topic for iOS interviews, but also if you are working with lots of high-resolution images in a list for an old iOS version, it improves the speed of scrolling animation to minimize freezing during scrolling before caching any item and show it when it is needed. Let’s discuss what are these topics.
Color Blending and Off-Screen Rendering
When we create a new UI element in iOS like UIView, UIImageView, it is rendered via the CPU. As iOS developers, we often meet complex UI challenges. Like changing alpha, shadow, corner radius of the expected element.
In similar cases, it is rendered via the GPU of the current device instead of its CPU — depending on the device capabilities, fps(frame per second) drops. This is exactly off-screen rendering, color blending in iOS.
For enabling blended layers and off-screen rendering on the simulator, selectDebug from the top of the menu, select Color Blended Layers and Color Misaligned Images. Let’s return to our example.
In our example, we have a table view to show a thousand items and their configuration inside the table view’s datasource function.
Both setting corner radius for current image view and changing the background color to clear trigger’s offscreen rendering and color blending, respectively.
Because, in the background, GPU of our device takes responsible for drawing, when any dropping shadow, setting corner radius to existing UI element.
In the simulator, the output is like this. The yellow one represents off-screen rendering, green and red one represents color blending.
To solve these issues, let’s change the background color of labels to prevent color blending of labels by changing as white. We can close the color blended layers option for only focusing off-screen rendering on the image.
To prevent off-screen rendering on our image view, let’s create a bezier path to round and draw it instead of setting layer cornering.
Now, we need to update rounded implementation like this:
Finally, off-screen rendering yellow is gone.
For the implementation of corner radius, we used the bezier path to round the existing image view to prevent off-screen rendering and we prevented alpha 0 usage to set the background color of labels. Both two implementations improve our app UI performance.
You can check it in Instrument or other tools.
Thanks for reading.
