● Summary: The nesting level of the view will affect the performance of the application. The developer should remove the redundant nesting level to shorten the component refresh time. This article will introduce how to use the ArkUI Inspector tool to analyze the layout and prompt the responsiveness of the application.
● Keywords: list keywords related to this article: OpenHarmony HarmonyOS Hongmeng Inspector Layout Checker View Nesting
overview
How smoothly an app renders its layout to the screen affects the user's perception of quality. It is recommended to remove redundant nesting levels to reduce view nesting levels. The nesting level of views can affect the performance of the application. Therefore, it is recommended that developers remove redundant nesting levels to shorten the time spent on component refresh.
If views are deeply nested, it will take more time to process and increase page rendering time. On a device with a screen refresh rate of 120Hz, a frame is refreshed every 8.3ms. If there are many nested levels of views, it may not be possible to complete a screen refresh within 8.3ms, which will cause frame loss and freeze, which will affect the user experience. . Nested views will create more nodes, which will increase memory consumption. If the nested views are fetched from the server, this may cause additional network latency, increasing the page load time. Excessive nesting of views can also make the structure and code of the page complex and difficult to maintain, which can lead to an increased likelihood of bugs and performance issues.
Therefore, reducing view nesting levels is very important. This article will introduce how to use the ArkUI Inspector tool to analyze the layout and prompt the responsiveness of the application.
Environmental preparation
The ArkUI Inspector tool has been integrated since DevEco Studio 4.0 Beta2, and you can download DevEco Studio 4.0 Beta2 from the OpenHarmony-v4.0-beta2 Release Notes#Companion section.
scenes to be used
Developers can use ArkUI Inspector to view the UI interface display effect of the application on the real device on DevEco Studio, view the component tree of the application interface component tree, and view the property information of the selected component.
Select a component on the component tree of ArkUI Inspector, the UI interface will automatically select the corresponding component, and the property list will display the property information of the current component. Click to select a component on the UI interface, the corresponding component in the component tree changes to the selected state, and the property list displays the property information of the current component.
The ArkUI Inspector tool is very easy to use. You can use it to analyze layouts, reduce layout nesting levels, and thus provide hints on application responsiveness.
Tool introduction
Use a cable to connect the real device to the development PC, open DevEco Studio, click ArkUI Inspector under DevEco Studio, and open ArkUI Inspector.
Click the RUN or DEBUG button to push the application to the device, and select the UI process currently displayed on the front of the device in the device application list. This article uses the Sample chat application , and the process to be selected is com.samples.chat.
The left side of ArkUI Inspector is the current component tree structure Component Tree, the middle column shows the UI display interface of the current device, and the right side shows the property information of the current component when the component is selected. When the UI on the device changes, you can click the refresh button in the upper right corner of the middle bar to synchronize the UI effect on the device. You can select a component on the component tree on the left or click to select a component directly on the UI interface.
If you want to quit using ArkUI Inspector, you can click Stop inspector, the last item in the device list, in the device box to disconnect from the device.
performance practice
Let's take a practical case to see how to use the ArkUI Inspector tool to optimize the layout.
Check out the project Sample chat instance application project code, use DevEco Studio to compile and build it, and push it to the development board to run.
We choose a simplified scenario, open a chat window with a friend, and view historical chat information. Refresh the UI interface in the ArkUI Inspector tool, as follows: It can be seen that the ListItem list item contains a Column->Row, and contains Row and Column subcomponents below. The subcomponent Column under the ListItem list item contains only one Row subcomponent container. The Column column container is unnecessary and can be removed, so that the subcomponents under the ListItem list item can be directly Row subcomponents, thereby reducing one view Nesting levels. The impact of one level of nesting may have negligible impact on performance. This practice is only used to demonstrate how to use the ArkUI Inspector tool to optimize the layout.
Let’s look at another example, open the chat contact page of the Sample chat application on the real device , and use the ArkUI Inspector tool to refresh the UI interface. Looking at the component tree on the left, you can check the nesting level of the components. There are a maximum of 10 levels of nesting, and you can consider whether it can reduce the nesting level. For example, the top-level Row component can be reduced, and other components can also be similarly checked to see if it is necessary. There is no optimal, only better.
Precautions
1. ArkUI Inspector only supports Stage projects of OpenHarmony API 9 and above
2. It needs to be compiled in debug mode.
3. The device has been connected via USB.
4. Use DevEco Studio 4.0 Beta2 and above.