Enhance efficiency for older iPhones
Each coloration mixing and off-screen rendering are an unheeded subject for iOS improvement owing to the ability of iPhones.
Alternatively, it isn’t solely a sizzling subject for iOS interviews, but additionally if you’re working with a lot of high-resolution photographs in a listing for an outdated iOS model, it improves the pace of scrolling animation to reduce freezing throughout scrolling earlier than caching any merchandise and present it when it’s wanted. Let’s talk about what are these subjects.
Colour Mixing and Off-Display screen Rendering
Once we create a brand new UI aspect in iOS like
UIImageView, it’s rendered through the CPU. As iOS builders, we frequently meet advanced UI challenges. Like altering alpha, shadow, nook radius of the anticipated aspect.
In comparable instances, it’s rendered through the GPU of the present system as an alternative of its CPU — relying on the system capabilities, fps(body per second) drops. That is precisely off-screen rendering, coloration mixing in iOS.
For enabling blended layers and off-screen rendering on the simulator, choose
Debug from the highest of the menu, choose Colour Blended Layers and Colour Misaligned Pictures. Let’s return to our instance.
In our instance, we now have a desk view to point out a thousand gadgets and their configuration contained in the desk view’s
Each setting nook radius for present picture view and altering the background coloration to clear set off’s offscreen rendering and coloration mixing, respectively.
As a result of, within the background, GPU of our system takes answerable for drawing, when any dropping shadow, setting nook radius to current UI aspect.
Within the simulator, the output is like this. The yellow one represents off-screen rendering, inexperienced and pink one represents coloration mixing.
To unravel these points, let’s change the background coloration of labels to forestall coloration mixing of labels by altering as white. We will shut the colour blended layers choice for less than focusing off-screen rendering on the picture.
To forestall off-screen rendering on our picture view, let’s create a bezier path to spherical and draw it as an alternative of setting layer cornering.
Now, we have to replace rounded implementation like this:
Lastly, off-screen rendering yellow is gone.
For the implementation of nook radius, we used the bezier path to spherical the present picture view to forestall off-screen rendering and we prevented alpha 0 utilization to set the background coloration of labels. Each two implementations enhance our app UI efficiency.
You’ll be able to examine it in Instrument or different instruments.
Thanks for studying.