Hi developers,
As part of our ongoing effort at Roblox to make games run smoothly across all devices, we’ve recently enabled some performance improvements for static UI rendering. Previously, Gui appearances were recomputed every frame. Now, Gui appearances are cached until they change. This means Guis now take less time to render if none of their descendants have changed since the previous frame.
An example Microprofiler capture of a place with hundreds of unchanging SurfaceGuis. The new system saves 1.9 milliseconds on my laptop. This improvement is even more significant on mobile devices.
A Gui’s appearance is cached until one of the following events occurs.
- A descendant is added to the Gui.
- A descendant is removed from the Gui.
- A property of a descendant of the Gui changes.
- A property of the Gui changes.
If any of these events occur, the Gui’s appearance will be recomputed the next frame it gets rendered.
I made a quick visualization of events that invalidate a Gui’s cached appearance. The red overlays indicate which object changed, causing the invalidation. The Purple outline overlay on the Gui indicates the entire Gui’s appearance has been recomputed.
Performance Tips
Currently, any change in any descendant of a Gui will invalidate the entire Gui’s appearance. We may make this more robust in the future. Consider separating mostly-static and mostly-dynamic UI into separate Guis so that the mostly-dynamic UI does not interfere with the mostly-static UI cache. Also consider avoiding frequently updating properties of non-visual descendants of Guis, for example Value on NumberValues.
Use the MicroProfiler to diagnose performance issues. Gui rendering has the label “GuiLayerCollector::render2dContext” and shows up under Pass3dAdorn and Pass2d. render2dContext will complete almost instantaneously for cached Guis.
To measure how well your Guis are being cached, you can write a script that listens to the events listed above that cause invalidation. You can use this method to make a visualization like the one in the video.
Also read about Quantum Gui. Quantum Gui is a separate optimization that caches the computed layout of a UI. There is another performance improvement related to checking if Guis need re-layouts on the way. This should further improve performance in places with dozens of Guis.