# Performance Debugging Tool Portal

# showPerformanceOverlay

display raster Thread and The usage of the ui (rendering) thread, the busy thread is shown in red

Raster Thread: If it is found to be time-consuming, it may be that the drawing content is too complex, such as using a lot of backdrop-filter, overflow: hidden, opacity These properties have an impact on the rasterization time, It may be recommended to reduce the use of these attributes. It is also possible to add a node that is updated frequently will-change: contents this wxss Property to avoid extensive redrawing (But this attribute should also be avoided too much use, otherwise it will have the opposite effect)
ui thread: Usually depends on whether there is no use on Type = "list," if it doesn't work, layout and paint The time will be high
Thread Related References

Displays a checkerboard on the screen. The component that displays the checkerboard indicates that it is cached

If the checkerboard color is found to have changed, the component is re-rendering
If the color keeps changing while scrolling and the element is still on the screen, there is a problem, indicating that there is no Cache, this time will affect the scrolling performance. It's possible list-view (type=list) It doesn't work. Yeah, it can work. will-change: contents To manually add a draw boundary
Not all components will form RasterCache, it needs to be a little more complicated to