!23862 性能最佳实践适配ArkTS

Merge pull request !23862 from sunqi/master

zh-cn/application-dev/performance/improve-application-startup-and-response/improve-application-cold-start-speed.md

@@ -69,12 +69,12 @@ OpenHarmony的应用冷启动过程大致可分成以下四个阶段：应用进
 
 aboutToAppear函数会在创建自定义组件实例后，页面绘制之前执行，以下代码在aboutToAppear中对耗时长的计算任务进行了异步处理，避免在该接口执行该耗时操作，不阻塞页面绘制。
 
-```javascript
+```typescript
 @Entry
 @Component
 struct Index {
-  @State private text: string = undefined;
-  private count: number = undefined;
+  @State private text: string = "";
+  private count: number = 0;
 
   aboutToAppear() {
     this.computeTaskAsync(); // 异步任务
@@ -100,11 +100,9 @@ struct Index {
 
   // 运算任务异步处理
   private computeTaskAsync() {
-    new Promise((resolved, rejected) => {
-      setTimeout(() => { // 这里使用setTimeout来实现异步延迟运行
-        this.computeTask();
-      }, 1000)
-    })
+    setTimeout(() => { // 这里使用setTimeout来实现异步延迟运行
+      this.computeTask();
+    }, 1000)
   }
 }
 ```
\ No newline at end of file

zh-cn/application-dev/performance/improve-application-startup-and-response/improve-application-response.md

@@ -13,7 +13,7 @@
 
 OpenHarmony提供的Image组件默认生效异步加载特性，当应用在页面上展示一批本地图片的时候，会先显示空白占位块，当图片在其他线程加载完毕后，再替换占位块。这样图片加载就可以不阻塞页面的显示，给用户带来良好的交互体验。因此，只在加载图片耗时比较短的情况下建议下述代码。 
 
-```javascript
+```typescript
 @Entry
 @Component
 struct ImageExample1 {
@@ -37,10 +37,10 @@ struct ImageExample1 {
 
 建议：在加载图片的耗时比较短的时候，通过异步加载的效果会大打折扣，建议配置Image的syncLoad属性。
 
-```javascript
+```typescript
 @Entry
 @Component
-struct ImageExample1 {
+struct ImageExample2 {
   build() {
     Column() {
       Row() {
@@ -63,7 +63,7 @@ struct ImageExample1 {
 
 OpenHarmony提供了[TaskPool线程池](../../reference/apis/js-apis-taskpool.md)，相比worker线程，TaskPool提供了任务优先级设置、线程池自动管理机制，示例如下：
 
-```javascript
+```typescript
 import taskpool from '@ohos.taskpool';
 
 @Concurrent
@@ -78,7 +78,7 @@ function computeTask(arr: string[]): string[] {
 
 @Entry
 @Component
-struct AspectRatioExample {
+struct AspectRatioExample3 {
   @State children: string[] = ['1', '2', '3', '4', '5', '6'];
 
   aboutToAppear() {
@@ -88,8 +88,7 @@ struct AspectRatioExample {
   async computeTaskInTaskPool() {
     const param = this.children.slice();
     let task = new taskpool.Task(computeTask, param);
-    // @ts-ignore
-    this.children = await taskpool.execute(task);
+    await taskpool.execute(task);
   }
 
   build() {
@@ -102,12 +101,12 @@ struct AspectRatioExample {
 
 以下代码展示了将一个长时间执行的非UI任务通过Promise声明成异步任务，主线程可以先进行用户反馈-绘制初始页面。等主线程空闲时，再执行异步任务。等到异步任务运行完毕后，重绘相关组件刷新页面。
 
-```javascript
+```typescript
 @Entry
 @Component
-struct AspectRatioExample {
+struct AspectRatioExample4 {
   @State private children: string[] = ['1', '2', '3', '4', '5', '6'];
-  private count: number = undefined;
+  private count: number = 0;
 
   aboutToAppear() {
     this.computeTaskAsync();  // 调用异步运算函数
@@ -123,11 +122,9 @@ struct AspectRatioExample {
   }
 
   computeTaskAsync() {
-    new Promise((resolved, rejected) => {
-      setTimeout(() => { // 这里使用setTimeout来实现异步延迟运行
-        this.computeTask();
-      }, 1000)
-    })
+    setTimeout(() => { // 这里使用setTimeout来实现异步延迟运行
+      this.computeTask();
+    }, 1000)
   }
 
   build() {
@@ -146,10 +143,10 @@ struct AspectRatioExample {
 
 以下代码的Text('New Page')组件被状态变量isVisible控制，isVisible为true时创建，false时销毁。当isVisible发生变化时，Stack容器内的所有组件都会刷新：
 
-```javascript
+```typescript
 @Entry
 @Component
-struct StackExample {
+struct StackExample5 {
   @State isVisible : boolean = false;
 
   build() {
@@ -175,10 +172,10 @@ struct StackExample {
 
 建议：对于这种受状态变量控制的组件，在if外套一层容器，减少刷新范围。
 
-```javascript
+```typescript
 @Entry
 @Component
-struct StackExample {
+struct StackExample6 {
   @State isVisible : boolean = false;
 
   build() {
@@ -208,11 +205,11 @@ struct StackExample {
 
 反例：this.arr中的每一项元素都被初始化和加载，数组中的元素有10000个，主线程执行耗时长。
 
-```javascript
+```typescript
 @Entry
 @Component
-struct MyComponent {
-  @State arr: number[] = Array.from(Array(10000), (v,k) =>k); 
+struct MyComponent7 {
+  @State arr: number[] = Array.from(Array<number>(10000), (v,k) =>k); 
   build() {
     List() {
       ForEach(this.arr, (item: number) => {
@@ -227,7 +224,7 @@ struct MyComponent {
 
 建议：这种情况下用LazyForEach替换ForEach，LazyForEach一般只加载可见的元素，避免一次性初始化和加载所有元素。
 
-```javascript
+```typescript
 class BasicDataSource implements IDataSource {
   private listeners: DataChangeListener[] = []
 
@@ -235,8 +232,8 @@ class BasicDataSource implements IDataSource {
     return 0
   }
 
-  public getData(index: number): any {
-    return undefined
+  public getData(index: number): string {
+    return ''
   }
 
   registerDataChangeListener(listener: DataChangeListener): void {
@@ -286,13 +283,13 @@ class BasicDataSource implements IDataSource {
 }
 
 class MyDataSource extends BasicDataSource {
-  private dataArray: string[] = Array.from(Array(10000), (v, k) => k.toString());
+  private dataArray: string[] = Array.from(Array<number>(10000), (v, k) => k.toString());
 
   public totalCount(): number {
     return this.dataArray.length
   }
 
-  public getData(index: number): any {
+  public getData(index: number): string  {
     return this.dataArray[index]
   }
 
@@ -318,7 +315,7 @@ struct MyComponent {
         ListItem() {
             Text(item).fontSize(20).margin({ left: 10 })
         }
-      }, item => item)
+      }, (item:string) => item)
     }
   }
 }

zh-cn/application-dev/performance/reduce-frame-loss-and-frame-freezing/reduce-animation-frame-loss.md

@@ -6,7 +6,7 @@
 
 反例：应用使用了自定义动画，动画曲线计算过程很容易引起UI线程高负载，易导致丢帧。
 
-```javascript
+```typescript
 @Entry
 @Component
 struct AttrAnimationExample {
@@ -17,8 +17,8 @@ struct AttrAnimationExample {
   computeSize() {
     let duration = 2000
     let period = 16
-    let widthSizeEnd = undefined
-    let heightSizeEnd = undefined
+    let widthSizeEnd = 0
+    let heightSizeEnd = 0
     if (this.flag) {
       widthSizeEnd = 100
       heightSizeEnd = 50
@@ -56,7 +56,7 @@ struct AttrAnimationExample {
 
 建议：通过系统提供的属性动效API实现上述动效功能。
 
-```javascript
+```typescript
 @Entry
 @Component
 struct AttrAnimationExample {
@@ -67,7 +67,7 @@ struct AttrAnimationExample {
   build() {
     Column() {
       Button('click me')
-        .onClick((event: ClickEvent) => {
+        .onClick((event?: ClickEvent | undefined) => {
           if (this.flag) {
             this.widthSize = 100
             this.heightSize = 50
@@ -96,7 +96,7 @@ struct AttrAnimationExample {
 
 建议：通过系统提供的显式动效API实现上述动效功能。
 
-```javascript
+```typescript
 @Entry
 @Component
 struct AnimateToExample {
@@ -107,7 +107,7 @@ struct AnimateToExample {
   build() {
     Column() {
       Button('click me')
-        .onClick((event: ClickEvent) => {
+        .onClick((event?: ClickEvent | undefined) => {
           if (this.flag) {
             animateTo({
               duration: 2000, // 动画时长

zh-cn/application-dev/performance/reduce-frame-loss-and-frame-freezing/reduce-view-nesting-levels.md

@@ -6,16 +6,16 @@
 
 反例：使用了Grid来实现一个网格，但是在外层套了3层stack容器，导致组件刷新和渲染耗时长。
 
-```javascript
+```typescript
 @Entry
 @Component
-struct AspectRatioExample {
-  @State children: Number[] = Array.from(Array(900), (v, k) => k);
+struct AspectRatioExample12 {
+  @State children: Number[] = Array.from(Array<number>(900), (v, k) => k);
 
   build() {
     Scroll() {
       Grid() {
-        ForEach(this.children, (item) => {
+        ForEach(this.children, (item:Number[]) => {
           GridItem() {
             Stack() {
               Stack() {
@@ -25,7 +25,7 @@ struct AspectRatioExample {
               }
             }
           }
-        }, item => item)
+        }, (item:string) => item)
       }
       .columnsTemplate('1fr 1fr 1fr 1fr')
       .columnsGap(0)
@@ -38,21 +38,20 @@ struct AspectRatioExample {
 
 建议：通过减少冗余的Stack容器嵌套，每个GridItem的组件数比上面少了3个，缩短了组件刷新与渲染耗时。
 
-```javascript
-// xxx.ets
+```typescript
 @Entry
 @Component
-struct AspectRatioExample {
+struct AspectRatioExample11 {
   @State children: Number[] = Array.from(Array(900), (v, k) => k);
 
   build() {
     Scroll() {
       Grid() {
-        ForEach(this.children, (item) => {
+        ForEach(this.children, (item:Number[]) => {
           GridItem() {
             Text(item.toString())
           }
-        }, item => item)
+        }, (item:string) => item)
       }
       .columnsTemplate('1fr 1fr 1fr 1fr')
       .columnsGap(0)