diff --git a/zh-cn/application-dev/performance/improve-application-startup-and-response/improve-application-cold-start-speed.md b/zh-cn/application-dev/performance/improve-application-startup-and-response/improve-application-cold-start-speed.md index dbb87f4612f671489bea67fbee6013e22f6fbb29..daad5a996516e5d43594c3dc08211cb09e937726 100644 --- a/zh-cn/application-dev/performance/improve-application-startup-and-response/improve-application-cold-start-speed.md +++ b/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 diff --git a/zh-cn/application-dev/performance/improve-application-startup-and-response/improve-application-response.md b/zh-cn/application-dev/performance/improve-application-startup-and-response/improve-application-response.md index acd7a634b8855d8de10a7fa0162d27d81f164b32..b21b23596146c7885b6f6a3d7f98b5c7ecc01b70 100644 --- a/zh-cn/application-dev/performance/improve-application-startup-and-response/improve-application-response.md +++ b/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(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(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) } } } diff --git a/zh-cn/application-dev/performance/reduce-frame-loss-and-frame-freezing/reduce-animation-frame-loss.md b/zh-cn/application-dev/performance/reduce-frame-loss-and-frame-freezing/reduce-animation-frame-loss.md index caaf5d22815504e5293e0a1a5990ed56a363a9c0..8e677d2e542d663f00b7ffaacc0a5fbab8b140b5 100644 --- a/zh-cn/application-dev/performance/reduce-frame-loss-and-frame-freezing/reduce-animation-frame-loss.md +++ b/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, // 动画时长 diff --git a/zh-cn/application-dev/performance/reduce-frame-loss-and-frame-freezing/reduce-view-nesting-levels.md b/zh-cn/application-dev/performance/reduce-frame-loss-and-frame-freezing/reduce-view-nesting-levels.md index ab4cf3697a3fdf5a9033019112b9d732ec05a401..c9337880dfaa220cfbac775d5586517ed6458c55 100644 --- a/zh-cn/application-dev/performance/reduce-frame-loss-and-frame-freezing/reduce-view-nesting-levels.md +++ b/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(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)