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.
This is fantastic! Should see some really nice improvements in performance! Is this enabled globally or is this restricted to the new UI system and won’t work with blacklisted places?
So basically when this new feature is live; when a GuiObject changes like a Text Box it will only render that change instead of rerendering all of the GuiObject inside the same LayerCollector ?
Does this improvement also act as a solution to another issue wherein the Gui section of memory would constantly move at a rate of change upward, or is this only related to performance for rendering Guis?
Not quite. Changing any GuiObject causes the entire LayerCollector’s appearance to need recomputing.
Basically, we were previously iterating through all GuiObject Instances and generating their rendering geometry every frame. Now, we iterate through all GuiObject Instances and generate a compact representation that has all of the information we need to create the Gui’s rendering geometry. This is an array of all the rectangles that appear on the screen and their colors, textures, etc. If a Gui hasn’t changed since the previous frame, we just draw the rectangles in the array instead of visiting every GuiObject descendant and regenerating its rectangles. The new method is more cache coherent and avoids doing redundant work to figure out what a GuiObject should look like based on what kind of GuiObject it is and what its property values are.
This is just a performance improvement. Is there a bug report thread for what you’ve described?
