There are a lot of elements that are basically almost entirely static on
the layout. Other elements such as the timer are frequently changing. In
the browser we already noticed that by pushing the timer onto its own
layer, you get a fairly big performance boost out of it.

Here's that Pull Request:

LiveSplit/LiveSplitOne#378

We want to apply a similar idea to the native renderer. In order to do
this we first introduce flags in the layout state that mark whether
a component or a part of a component is at the specific time considered
frequently changing. By doing this not only does the native renderer
benefit from it, but other renderers such as the web version can also
make decisions based on that, as opposed to only applying the
optimization to the timer component.

With all the components providing these flags, the renderer can now
split up the frame into a bottom layer and a top layer where all the
frequently changing elements are rendered onto the top layer and all the
other elements rendered onto the bottom layer. In fact the top layer is
actually the frame buffer and it simply gets cleared by copying over
regions from the bottom layer. That way there is no additional
compositing necessary.

Additionally the renderer is now more of a scene manager that manages
entities in a scene rather than directly emitting draw calls to a
backend. The scene is a data structure that allows traversing the two
layers in any way a renderer (i.e. what used to be a backend) would want
to render them out. So the whole design is a lot more decoupled now.

There are a lot of elements that are basically almost entirely static on
the layout. Other elements such as the timer are frequently changing. In
the browser we already noticed that by pushing the timer onto its own
layer, you get a fairly big performance boost out of it.

Here's that Pull Request:

LiveSplit/LiveSplitOne#378

We want to apply a similar idea to the native renderer. In order to do
this we first introduce flags in the layout state that mark whether
a component or a part of a component is at the specific time considered
frequently changing. By doing this not only does the native renderer
benefit from it, but other renderers such as the web version can also
make decisions based on that, as opposed to only applying the
optimization to the timer component.

With all the components providing these flags, the renderer can now
split up the frame into a bottom layer and a top layer where all the
frequently changing elements are rendered onto the top layer and all the
other elements rendered onto the bottom layer. In fact the top layer is
actually the frame buffer and it simply gets cleared by copying over
regions from the bottom layer. That way there is no additional
compositing necessary.

Additionally the renderer is now more of a scene manager that manages
entities in a scene rather than directly emitting draw calls to a
backend. The scene is a data structure that allows traversing the two
layers in any way a renderer (i.e. what used to be a backend) would want
to render them out. So the whole design is a lot more decoupled now.