UI Optimization Strategy-

Go out: http://gad.qq.com/article/detail/26562

Generally speaking, to optimize CPU performance, you should first use the profiler to locate the performance hotspot, find the function with the highest consumption, and then find a way to reduce its consumption.

After the author has used profiler to analyze UGUI many times, one of the main reasons for its high CPU performance overhead is the reconstruction of the UI grid by Canvs. There are many situations that will trigger the reconstruction of the grid by Canvas, such as UI elements such as Image and Text. Enable and changes of the length, width or Color properties of UI elements, etc.

If there are many UI Mesh vertices in Canvas, this item will have high CPU overhead. In Unity's Profiler, the corresponding Canvas.SendWillRenderCanvases or Canvas.BuildBatch takes too much time.

The main function of Canvas.BuildBatch is to merge the grids of all UI elements under the Canvas node. The merged grid will be cached, and will be merged again only when the grid of the UI elements below it changes.

The network changes of UI elements are mainly due to the rebuilding of Layout or graphic when Canvas.SendWillRenderCanvases is called. The sequence diagram of the calling process of this function is as follows:

 

1: This process is executed by CanvasUpdateRegistry monitoring Canvas's WillRenderCanvases (1 in the above figure), mainly to rebuild the layout and graphics previously marked as dirty. The main reason for the dirty layout and graphics is because the UI elements under the Canvas tree structure have changed (such as adding and deleting UI objects, UI element vertices, rec size changes, etc.) Graphic.SetDirty is called (in fact, CanvasUpdateRegistry will eventually be called) .RegisterCanvasElementForLayoutRebuild).

2: Before rebuilding the layout, the elements in the Layout rebuild queue will be sorted according to their hierarchical depth in the heiarchy (2 in the above figure). The result of the arrangement is that the nodes closer to the root will be preferentially processed.

3: rebuild layout (3 in the above figure), mainly to execute the methods in the ILayoutElement and ILayoutController interfaces to calculate the layout information such as the position and the size of the Rect.

4: rebulid graphic (4 in the above figure), mainly calling UpdateGeometry to reconstruct the vertex data of the mesh (5 in the above figure) and calling UpdateMeterial to update the material information of the CanvasRender (6 in the above figure).