The application startup performance is subject to the number of nodes and attributes of the FrameNode tree. You are advised to optimize UI components in the following ways:
Avoiding Time-Consuming Operations Throughout the Lifecycle of a Custom Component
The preceding figure shows the lifecycle of a custom component. After a custom component is created, call the lifecycle callback aboutToAppear() before executing the build function. In this case, performing time-consuming operations will block the UI rendering, increasing the load of the UI main thread. Therefore, avoid time-consuming operations during the lifecycle of a custom component. For details, see Custom Component Lifecycle. For details about optimization cases, see Avoiding Time-Consuming Operations During the Lifecycle of a Custom Component.
Registering Component Properties on Demand
During application UI development, you need to set properties for each component and process logic such as UI style and behavior. When multiple properties are set for a single component and the component is frequently used in the application, the settings greatly affect the application performance. For details about optimization cases, see Registering Component Properties on Demand.
Reducing Layout Calculation
If the width and height of a component do not need to be adaptive, you are advised to specify the width and height of the component in the UI description. If the size of the container outside the component changes (for example, in the drag and resizing scenarios), and the width and height of the component are fixed, this component will theoretically skip the Measure phase during layout. The corresponding size information has been stored on the node. For components with extensive content, this avoids the need for overall calculation, leading to significant performance improvement. For details about optimization cases, see Reducing Layout Calculation by Using Layout Boundaries and Specifying the Width and Height of the List Component.