The <div> on the left is identical to the <div> on the right and yet the one on the left renders 1.5x faster than the one on the right. This happens because each pixel of the <div> on right requires the context of the pixel under it as it is not completely opaque, on the other hand the <div> on the right doesn’t even need to render the pixels under it. Having many them can unknowingly butcher the performance of your UI.
We at Mecha are building a GUI Library for the Mecha Comet, and we have found that there is a lot hidden under hoods of GUI Libraries that let’s them render any kind of UI efficiently. I am going to go over a few algorithms and concepts like early-z discard, painter’s algorithm, alpha blending and damaged rendering that are implemented in GUI Libraries like Flutter and even in the engine behind Chromium to improve the performance of UIs. We will also go over how they integrate with each other — how a single design choice (like whether a surface is opaque or translucent) decides which of these optimizations the renderer can use. Without these algorithms it would be prohibitively expensive to render the kinds of UI we see everywhere at a reasonable resource usage.
Now that the listeners have an understanding of the above concepts, I’ll go over how they can use these concepts to improve performance of UIs in the design phase and/or the development phase. I’ll go over elements that just improve the performance without any drawbacks, and also talk about the hidden costs of using certain element so listeners can consciously pick them rather than unknowingly paying the price.
