diff --git a/AvoidTimeComsume/README_EN.md b/AvoidTimeComsume/README_EN.md new file mode 100644 index 0000000000000000000000000000000000000000..3042a16cb75fb18ec1817feec95e570aac3784fa --- /dev/null +++ b/AvoidTimeComsume/README_EN.md @@ -0,0 +1,63 @@ +# **Optimization for Time-Consuming Operations in the Main Thread** +## Overview +In application development practices, it is important to effectively prevent the main thread from performing redundant and time-consuming operations. This can effectively reduce the load of the main thread and speed up the UI response. In scenarios where high-frequency callbacks are frequently triggered in a short period of time, time-consuming operations in the APIs need to be avoided to ensure that the main thread is not occupied for a long time. This prevents UI rendering from being blocked to avoid frame freezing or frame loss. +This sample describes common redundant operations, common high-frequency callback scenarios, and other main thread optimization methods during development. + +## Preview +![](screenshots/output-15_16_3.gif) +## Project Directory +``` +├──entry/src/main/ets // Code +│ ├──common +│ │ └──Item.ets // Common items +│ ├──entryability +│ │ └──EntryAbility.ets // Entry ability +│ ├──entrybackupability +│ │ └──EntryBackupAbility.ets +│ ├──pages +│ │ └──Index.ets // Home page +│ └──views.ets +│ ├──ConditionalRendering.ets // Conditional rendering +│ ├──GetStrOfId.ets // ID resources +│ ├──GetStrOfResource.ets // Resources +│ ├──NegativeOfGrid.ets // Negative example of component reuse +│ ├──NegativeOfLazyForEach.ets // Negative example of repeated rendering +│ ├──NegativeOfOnScroll.ets // Time-consuming operations in the high-frequency callback +│ ├──NegativeOfProperty.ets // Negative example of component properties +│ ├──NoRedundantOperation.ets // No redundant operations +│ ├──PositiveOfGrid.ets // Positive example of component reuse +│ ├──PositiveOfLazyForEach.ets // Positive example of repeated rendering +│ ├──PositiveOfOnScroll.ets // No time-consuming operations in the high-frequency callback +│ ├──PositiveOfProperty.ets // Positive example of component properties +│ ├──RedundantOperation.ets // Redundant operations +│ ├──UseAsync.ets // Using asynchronous mode +│ ├──UseTaskPool.ets // Using multiple threads +│ └──WaterFlowDataSource.ets // Waterflow lazy loading data source +└──entry/src/main/resources // Application resources +``` +## How to Use +The negative example of avoiding redundant operations includes printing redundant logs, tracing, and invoking callbacks without service code in the release version, reducing performance. + +In the preceding examples, time-consuming operations should be avoided in the following common high-frequency callback scenarios: +* High-frequency event callback +* Component reuse callback +* Component lifecycle callback +* Repeated rendering +* Component properties + +In the negative example, time-consuming operations are performed in the preceding high-frequency events, reducing performance. + +The negative example of avoiding using time-consuming APIs uses APIs without specified resource IDs. As a result, the time consumption increases and the performance is affected. + +In the positive example of using multiple threads, the page rendering speed is accelerated and the performance is improved. +## Required Permissions +N/A + +## Constraints +* This sample is supported only on Huawei phones running the standard system. + +* The HarmonyOS version must be HarmonyOS NEXT Release or later. + +* The DevEco Studio version must be DevEco Studio NEXT Release or later. + +* The HarmonyOS SDK version must be HarmonyOS NEXT Release SDK or later. diff --git a/AvoidTimeComsume/entry/src/main/ets/views/PositiveOfLazyForEach.ets b/AvoidTimeComsume/entry/src/main/ets/views/PositiveOfLazyForEach.ets index 6a5c85a85e83b42bd074a15eb7cd64a3138bf830..14d42960c768f2ac4fa512b44f7d1fe0e6281003 100644 --- a/AvoidTimeComsume/entry/src/main/ets/views/PositiveOfLazyForEach.ets +++ b/AvoidTimeComsume/entry/src/main/ets/views/PositiveOfLazyForEach.ets @@ -49,6 +49,12 @@ struct PositiveOfLazyForEach { // The value calculated by the time-consuming operation private timeConsumingValue: number = 0; + aboutToAppear(): void { + for (let i = 1; i < 1000; i++) { + this.data.pushData(i); + } + } + // Execute time-consuming asynchronous functions elsewhere // Simulate time-consuming operations itemGeneratorFunc() { @@ -131,7 +137,7 @@ struct ReusableChildComponent { .width(48) .height(48) .margin({ bottom: 12 }) - Text(`${this.item}`) + Text(`image${this.item}`) .fontSize(12) .textAlign(TextAlign.Center) } diff --git a/AvoidTimeComsume/screenshots/output-15_16_3.gif b/AvoidTimeComsume/screenshots/output-15_16_3.gif new file mode 100644 index 0000000000000000000000000000000000000000..8edf68e5b8a0b97a89b25f71dd0a5d641399d7b4 Binary files /dev/null and b/AvoidTimeComsume/screenshots/output-15_16_3.gif differ