During application development, controlling the UI rendering range can prevent frame freezing or frame loss.
It is common to control the display or hiding of elements. You can achieve this through the Visibility.None property or the if condition. The if condition controls component creation and layout, and the visibility property controls whether an element participates in layout rendering. Improper use may cause performance issues. For details, see Properly Controlling the Display and Hiding of Elements.
LazyForEach is a lazy loading technology that loads data or resources only when necessary and creates components during each iteration. This technology is usually used in the scenarios characterized by large data volumes and reusable child components, such as long lists and waterfalls. Resource loading is triggered only when a user scrolls the page to the target position. This reduces the component loading time and improves application performance and ultimately user experience.
In addition, you can set cachedCount in LazyForEach to specify the number of items to cache. Once set, the Item component displayed on the screen, and the specified data records outside the viewpoint of the screen are cached in advance. For details, see Caching List Items.
Component reuse reduces creation overhead with existing component nodes, thereby significantly improving UI thread responsiveness. Component reuse applies when the same custom component is destroyed or re-created. For example, in the long list optimization, waterfall optimization, and Swiper component optimization scenarios, a large number of repeated layouts are created. Component reuse can greatly reduce the performance loss caused by frequent component creation and destruction.
During application development, the list structure on the page is complex, and each list item contains a large number of components. As a result, the nesting level is deep, the component load increases, and the drawing time increases. In this case, a large amount of data is loaded at a time when the list item is transitioned or the list is swiping. The frame-based rendering method divides the data loaded to a frame into multiple frames for loading. However, frame-based rendering requires you to calculate the amount of data to be loaded in each frame, which is complex. Therefore, this method is recommended only when necessary. For details, see Frame-based Rendering in Heavy-load Scenarios.