性能优化实操宝典
概述
本文总结了实际开发应用时常见的性能优化规范，配合举例实际开发中常见的正反例代码，帮助开发者解决大部分性能问题。
性能规范总览目录
| 分类 | 规范（检查项） | 实操方法 | 高频程度(5满分) | 代码示例 |
|---|---|---|---|---|
| 响应时延/完成时延 | 不建议在aboutToAppear(),aboutToDisappear()等生命周期中执行耗时操作 | 排查所有的aboutToAppear和aboutToDisappear函数(或者通过Trace查看)，查看是否有耗时操作，改为setTimeOut或者在TaskPool中执行。 | 5 | 代码示例 |
| 响应时延/完成时延 | 不要在回调函数中执行耗时操作(ArkUI接口回调、网络访问回调、await等) | 排查所有的回调函数(或者通过Trace查看)，尤其是ArkUI接口，网络回调函数，查看是否有耗时操作，是否使用了await操作，改为setTimeOut或者在TaskPool中执行。 | 5 | 代码示例 |
| 响应时延/完成时延/帧率 | 列表场景未使用LazyForEach+组件复用+缓存列表项 | 排查使用LazyForEach的代码，确认是否有使用组件复用(@Reusable)+缓存列表项(cachedCount)。 | 5 | 代码示例 |
| 完成时延 | Web未使用预连接，未提前初始化引擎 | 在应用创建Ability的时候，在OnCreate阶段预先初始化内核，建议把引擎的初始化放在setTimeOut中。 | 5 | 代码示例 |
| 响应时延/完成时延 | 高频接口中不要打印Trace和日志 | 排查接口onTouch、onItemDragMove、onDragMove、onScroll、onMouse、onVisibleAreaChange、OnAreaChange、 onActionUpdate、animator的onframe、组件复用场景下的aboutToReuse，不建议在里面打印trace和日志。 | 5 | 代码示例 |
| 完成时延/帧率 | 组件复用里面有if语句，但是未使用reuseId | 排查使用了@Reusable的自定义组件，查看build中给是否使用了if/else或ForEach等条件渲染语句，如果使用了，需要配合reuseId一起使用。 | 4 | 代码示例 |
| 响应时延/完成时延 | 不建议使用@Prop装饰器 | 全局搜索@Prop并且替换 | 4 | 代码示例 |
| 响应时延/完成时延 | 避免在ResourceManager的getXXXSync接口入参中直接使用资源信息 | 排查ResourceManager.getXXXSync接口，查看入参时需要使用getStringSync($r('app.media.icon').id)的形式， 如果未使用需要整改。 | 3 | 代码示例 |
| 响应时延/完成时延 | 展示用的自定义组件（数据从父组件中获取，无独立数据处理）使用@Builder替换 | 审视@Component标记的自定义组件，如果里面没有独立的生命周期处理逻辑，数据由父组件传递，建议@Builder替代。 | 3 | 代码示例 |
| 响应时延/完成时延/帧率 | 删除无具体逻辑的生命周期，ArkUI的函数回调等，删除冗余堵塞日志打印 | 排查所有的aboutToAppear、aboutToDisappear等生命周期函数，排查ArkUI的回调函数，如果函数中无具体业务逻辑， 例如只打印了日志，删除函数回调。 | 3 | 代码示例 |
| 响应时延/完成时延 | 删除未关联组件的状态变量装饰器 | 排查全局的状态变量装饰器，如果变量未关联组件，删除装饰器。 | 3 | 代码示例 |
| 帧率 | crypto-js性能差 | 排查buffer.from关键字，加密建议使用原生的cryptoFramework，然后将buffer替换为base64helper，性能提升10倍以上， 且数据量越大越明显。 | 2 | 代码示例 |
| 响应时延/完成时延 | 不建议使用Marquee组件 | 排查Marquee关键字，使用Text的跑马灯模式(TextOverflow.MARQUEE)替代。 | 1 | 代码示例 |
| 完成时延 | 不能使用函数作为ArkUI组件的属性和组件复用的自定义组件的入参 | 查看属性是否有xx()函数写法，确认函数/方法中是否有耗时操作，替换成变量。 | 1 | 代码示例 |
| 完成时延 | 删除多余的import，会影响页面的启动时间 | 排查所有import代码，删除无用的引入。 | 1 | 代码示例 |
| 完成时延 | 不建议使用.linearGradient颜色渐变属性 | 排查linearGradient关键字，可以使用图片代替。 | 1 | 代码示例 |
| 完成时延/帧率 | 不要在for/while循环中执行耗时操作 | 排查for/while循环，查看里面是否有打印日志或者Trace。 | 1 | 代码示例 |
| 完成时延 | 变量初值不建议设置为undefined，需进行默认初始化 | 例如number设置为0，string设置为空字符串等，这样在使用过程中更不需要增加额外判空。 排查类中的变量，看看是否有初始化为undefined。 | 1 | 代码示例 |
性能优化规范
不建议在aboutToAppear()、aboutToDisappear()等生命周期中执行耗时操作
类型
响应时延/完成时延
解决方法
排查所有的aboutToAppear和aboutToDisappear函数(或者通过Trace查看)，查看是否有耗时操作，改为setTimeOut或者在TaskPool中执行。
反例
@Entry
@Component
struct Index {
@State private text: string = "";
private count: numeber = 0;
// 反例：在aboutToAppear接口中执行耗时操作，阻塞页面绘制。
aboutToAppear() {
// 耗时操作
this.computeTask();
let context = context.resourceManager.getStringSync($r('app.string.startup_text'));
}
computeTask(): void {
this.count = 0;
while (this.count < LARGE_NUMBER) {
this.count++;
}
let context = getContext(this) as Context;
this.text = context.resourceManager.getStringSync($r('app.string.task_text'));
}
}
正例
@Entry
@Component
struct Index {
@State private text: string = "";
private count: numeber = 0;
private readonly DELAYED_TIME: number = 2000; // 定时器设置延时2s
// 正例：在aboutToAppear接口中对耗时间的计算任务进行了异步处理。
aboutToAppear() {
// 耗时操作
this.computeTaskAsync(); // 异步任务
let context = getContext(this) as Context;
this.text = context.resourceManager.getStringSync($r('app.string.startup_text'));
}
computeTask(): void {
this.count = 0;
while (this.count < LARGE_NUMBER) {
this.count++;
}
let context = getContext(this) as Context;
this.text = context.resourceManager.getStringSync($r('app.string.task_text'));
}
// 运算任务异步处理
private computeTaskAsync(): void {
setTimeout(() => {
// 这里使用setTimeout来实现异步延迟运行
this.computeTask();
}, DELAYED_TIME)
}
}
高频程度&收益（5满分）
5
不要在回调函数中执行耗时操作（ArkUI接口回调、网络访问回调、await等）
类型
响应时延/完成时延
解决方法
排查所有的回调函数(或者通过Trace查看)，尤其是ArkUI接口，网络回调函数，查看是否有耗时操作，是否使用了await操作，改为setTimeOut或者在TaskPool中执行。
反例
import http from '@ohos.net.http';
aboutToAppear() {
// ...
const b = await this.requestB();
}
async requestB(): { // 创建任务项
return http.createHttp();
}
正例
aboutToAppear() {
// ...
// 在生命周期中，使用TaskPool加载和解析网络数据
this.requestByTaskPool();
}
@Concurrent
getInfoFromHttp(): string[] {
// 从网络加载数据
return http.request();
}
requestByTaskPool(): void {
// 创建任务项
let task: taskpool.Task = new taskpool.Task(this.getInfoFromHttp);
try {
// 执行网络加载函数
taskpool.execute(task, taskpool.Priority.HIGH).then((res: string[]) => {
});
} catch (err) {
logger.error(TAG, "failed, " + (err as BusinessError).toString());
}
}
高频程度&收益（5满分）
5
列表场景未使用LazyForEach+组件复用+缓存列表项
类型
响应时延/完成时延/帧率
解决方法
排查使用LazyForEach的代码，确认是否有使用组件复用(@Reusable)+缓存列表项(cachedCount)。
反例
build() {
Grid() {
// 未使用LazyForEach+组件复用+缓存列表项
ForEach(this.GoodDataOne, (item, index) => {
GridItem() {
Column() {
Image(item.img)
.height(item.hei)
.width('100%')
.objectFit(ImageFit.Fill)
Text(item.introduce)
.fontSize(14)
.padding({ left: 5, right: 5 })
.margin({ top: 5 })
Row() {
Row() {
Text('￥')
.fontSize(10)
.fontColor(Color.Red)
.baselineOffset(-4)
Text(item.price)
.fontSize(16)
.fontColor(Color.Red)
Text(item.numb)
.fontSize(10)
.fontColor(Color.Gray)
.baselineOffset(-4)
.margin({ left: 5 })
}
Image($r('app.media.photo63'))
.width(20)
.height(10)
.margin({ bottom: -8 })
}
.width('100%')
.justifyContent(FlexAlign.SpaceBetween)
.padding({ left: 5, right: 5 })
.margin({ top: 15 })
}
.borderRadius(10)
.backgroundColor(Color.White)
.clip(true)
.width('100%')
.height(290)
}
}, (item) => JSON.stringify(item))
}
}
正例
// 组件复用
@Reusable
@Component
struct GoodItems {
@State img: Resource = $r("app.media.photo61");
@State webimg?: string = '';
@State hei: number = 0;
@State introduce: string = '';
@State price: string = '';
@State numb: string = '';
@LocalStorageLink('storageSimpleProp') simpleVarName: string = '';
boo: boolean = true;
index: number = 0;
controllerVideo: VideoController = new VideoController();
aboutToReuse(params)
{
this.webimg = params.webimg;
this.img = params.img;
this.hei = params.hei;
this.introduce = params.introduce;
this.price = params.price;
this.numb = params.numb;
}
build() {
Grid(){
// 懒加载
LazyForEach(this.GoodDataOne, (item, index) => {
GridItem() {
GoodItems({
boo:item.data.boo,
img:item.data.img,
webimg:item.data.webimg,
hei:item.data.hei,
introduce:item.data.introduce,
price:item.data.price,
numb:item.data.numb,
index:index
})
.reuseId(this.CombineStr(item.type))
}
}, (item) => JSON.stringify(item))
}.cachedCount(2) // 缓存列表项
}
}
高频程度&收益（5满分）
5
Web未使用预连接，未提前初始化引擎
类型
完成时延
解决方法
在应用创建Ability的时候，在OnCreate阶段预先初始化内核，建议把引擎的初始化放在setTimeOut中。
反例
// ...
// Web组件引擎没有初始化，且沒有使用预连接
export default class EntryAbility extends UIAbility {
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
}
}
controller: webview.WebviewController = new webview.WebviewController();
// ...
Web({ src: 'https://www.example.com', controller: this.controller })
正例
export default class EntryAbility extends UIAbility {
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) {
console.log("EntryAbility onCreate")
// 在 Web 组件初始化之前，通过此接口加载 Web 引擎的动态库文件，以提高启动性能。
setTimeout(() => {
// 这里使用setTimeout来实现延迟运行
web_webview.WebviewController.initializeWebEngine()
}, 200)
console.log("EntryAbility onCreate done")
}
}
controller: webview.WebviewController = new webview.WebviewController();
// ...
Web({ src: 'https://www.example.com', controller: this.controller })
高频程度&收益（5满分）
5
高频接口中不要打印Trace和日志
类型
响应时延/完成时延
解决方法
排查接口onTouch、onItemDragMove、onDragMove、onScroll、onMouse、onVisibleAreaChange、OnAreaChange、
onActionUpdate、animator的onframe、组件复用场景下的aboutToReuse，不建议在里面打印trace和日志。
反例
Scroll() {
ForEach(this.arr, (item: number) => {
Text("ListItem" + item)
.width("100%")
.height("100%")
}, (item: number) => item.toString())
}
.width('100%')
.height('100%')
.onScroll(() => {
hitrace.startTrace("ScrollSlide", 1002);
// 业务逻辑
// ...
// 在高频接口中不建议打印Trace和日志
hitrace.finishTrace("ScrollSlide", 1002);
})
正例
@Component
struct PositiveOfOnScroll {
private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
build() {
Scroll() {
List() {
ForEach(this.arr, (item: number) => {
ListItem() {
Text("TextItem" + item)
}
.width("100%")
.height(100)
}, (item: number) => item.toString())
}
.divider({ strokeWidth: 3, color: Color.Gray })
}
.width('100%')
.height('100%')
.onScroll(() => {
// 业务逻辑
// ...
})
}
}
高频程度&收益（5满分）
4
组件复用里面有if语句，但是未使用reuseId
类型
完成时延/帧率
解决方法
排查使用了@Reusable的自定义组件，查看build中给是否使用了if/else或ForEach等条件渲染语句，如果使用了，需要配合reuseId一起使用。
反例
@Component
@Reusable
export struct MockComplexSubBranch {
@State alignStyle: FlexAlign = FlexAlign.Center;
aboutToReuse(params: Record<string, number>): void { // 缓存复用组件，更新组件的状态变量
this.alignStyle = params.alignStyle;
}
build() {
Column() {
Column({ space: 5 }) {
Text('ComplexSubBranch not reusable')
.fontSize($r('app.integer.font_size_9'))
.fontColor($r('app.color.hint_txt_color'))
.width($r('app.string.layout_90_percent'))
}
}
}
}
import { MockComplexSubBranch } from './MockComplexSubBranch';
@Component
export struct WithoutReuseId {
@State isAlignStyleStart: boolean = true;
build() {
Column() {
Button("Change FlexAlign")
.onClick(() => {
this.isAlignStyleStart = !this.isAlignStyleStart;
})
Stack() {
if (this.isAlignStyleStart) {
MockComplexSubBranch({ alignStyle: FlexAlign.Start }); // 未使用reuseId
} else {
MockComplexSubBranch({ alignStyle: FlexAlign.End });
}
}
}
}
}
正例
@Component
@Reusable
// 添加Reusable装饰器，声明组件具备可复用的能力
export struct MockComplexSubBranch {
@State alignStyle: FlexAlign = FlexAlign.Center;
aboutToReuse(params: Record<string, number>): void {
this.alignStyle = params.alignStyle;
}
build() {
Column() {
Column({ space: 5 }) {
Text('ComplexSubBranch reusable')
.fontSize($r('app.integer.font_size_9'))
.fontColor($r('app.color.hint_txt_color'))
.width($r('app.string.layout_90_percent'))
}
}
}
}
import { MockComplexReusableSubBranch } from './MockComplexReusableSubBranch';
@Component
export struct WithReuseId {
@State isAlignStyleStart: boolean = true;
build() {
Column() {
Button("Change FlexAlign")
.onClick(() => {
this.isAlignStyleStart = !this.isAlignStyleStart;
})
Stack() {
if (this.isAlignStyleStart) {
MockComplexSubBranch({ alignStyle: FlexAlign.Start }).reuseId("MockComplexSubBranchStart"); // 使用reuseId标识
} else {
MockComplexSubBranch({ alignStyle: FlexAlign.End }).reuseId("MockComplexSubBranchEnd");
}
}
}
}
}
高频程度&收益（5满分）
4
不建议使用@Prop装饰器
类型
响应时延/完成时延
解决方法
全局搜索@Prop并且替换
反例
@Observed
class ClassA {
public c: number = 0;
constructor(c: number) {
this.c = c;
}
}
@Component
struct PropChild {
@Prop testNum: ClassA[]; // @Prop装饰状态变量会深拷贝
build() {
Text(`PropChild testNum ${this.testNum.c}`)
}
}
@Entry
@Component
struct Parent {
@State testNum: ClassA[] = [new ClassA(1)];
build() {
Column() {
Text(`Parent testNum ${this.testNum[0].c}`)
.onClick(() => {
this.testNum[0].c += 1;
})
// PropChild没有改变@Prop testNum: ClassA的值，所以这时最优的选择是使用@ObjectLink
PropChild({ testNum: this.testNum[0] })
}
}
}
正例
@Observed
class ClassA {
public c: number = 0;
constructor(c: number) {
this.c = c;
}
}
@Component
struct PropChild {
@ObjectLink testNum: ClassA[]; // @ObjectLink装饰状态变量不会深拷贝
build() {
Text(`PropChild testNum ${this.testNum.c}`)
}
}
@Entry
@Component
struct Parent {
@State testNum: ClassA[] = [new ClassA(1)];
build() {
Column() {
Text(`Parent testNum ${this.testNum[0].c}`)
.onClick(() => {
this.testNum[0].c += 1;
})
// 当子组件不需要发生本地改变时，优先使用 @ObjectLink，因为@Prop是会深拷贝数据，具有拷贝的性能开销，所以这个时候@ObjectLink是比@Link和 @Prop更优的选择
PropChild({ testNum: this.testNum[0] })
}
}
}
高频程度&收益（5满分）
4
避免在ResourceManager的getXXXSync接口入参中直接使用资源信息
类型
响应时延/完成时延
解决方法
排查ResourceManager.getXXXSync接口，查看入参时需要使用getStringSync($r(‘app.media.icon’).id)的形式，
如果未使用需要整改。
反例
this.context.resourceManager.getStringSync($r('app.string.test'));
正例
this.context.resourceManager.getStringSync($r('app.string.test').id);
高频程度&收益（5满分）
3
展示用的自定义组件（数据从父组件中获取，无独立数据处理）使用@Builder替换
类型
响应时延/完成时延
解决方法
审视@Component标记的自定义组件，如果里面没有独立的生命周期处理逻辑，数据由父组件传递，建议@Builder替代。
反例
@Entry
@Component
struct CEMineButtomView {
build() {
View();
}
}
@Component
export struct View {
build() {
Row() {
Text('- 到底了 -')
.fontSize(12)
.fontColor($r("app.color.color_1"))
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height(51)
.padding({ bottom: 21 })
}
}
正例
@Builder
function view() {
Row() {
Text('- 到底了 -').fontSize(12)
.fontColor($r("app.color.color_1"))
}
.justifyContent(FlexAlign.Center)
.width('100%')
.height(51)
.padding({ bottom: 21 })
}
@Entry
@Component
struct CEMineButtomView {
build() {
Column(){
view()
}.width('100%')
}
}
高频程度&收益（5满分）
3
删除无具体逻辑的生命周期，ArkUI的函数回调等，删除冗余堵塞日志打印
类型
响应时延/完成时延/帧率
解决方法
排查所有的aboutToAppear、aboutToDisappear等生命周期函数，排查ArkUI的回调函数，如果函数中无具体业务逻辑，
例如只打印了日志，删除函数回调。
反例
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct Index {
aboutToAppear(): void {
hilog.info('Index.ets aboutToAppear') // 无具体业务逻辑的日志
}
aboutToDisappear(): void{
hilog.info('Index.ets aboutToDisappear') // 无具体业务逻辑的日志
}
/**
* 弹窗函数
*/
showToast() {
promptAction.showToast({
message: $r('app.string.water_mark_toast_message')
})
}
build() {
Column(){
Text('测试一下')
.onClick(()=>{
this.showToast(); // 有业务逻辑的方法
})
}.width('100%')
}
}
正例
import promptAction from '@ohos.promptAction';
@Entry
@Component
struct Index {
/**
* 弹窗函数
*/
showToast() {
promptAction.showToast({
message: $r('app.string.water_mark_toast_message')
})
}
build() {
Column(){
Text('测试一下')
.onClick(()=>{
this.showToast(); // 有业务逻辑的方法
})
}.width('100%')
}
}
高频程度&收益（5满分）
3
删除未关联组件的状态变量装饰器
类型
响应时延/完成时延
解决方法
排查全局的状态变量装饰器，如果变量未关联组件，删除装饰器。
反例
@Component
struct component {
@State message: string = 'Hello World';
@State textColor: string | Color = '#007DFF';
@State bgcolor: string | Color = '#ffffff'; // 变量bgcolor是没有关联组件的
@State selectColor: string | Color = '#007DFF'; // 变量selectColor是没有关联组件的
build() {
column(){
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.fontColor(this.textColor)
}
}
}
正例
@Component
struct component {
@State message: string = 'Hello World';
@State textColor: string | Color = '#007DFF';
bgcolor: string | Color = '#ffffff'; // 变量bgcolor是没有关联组件的
selectColor: string | Color = '#007DFF'; // 变量selectColor是没有关联组件的
build() {
column(){
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.fontColor(this.textColor)
}
}
}
高频程度&收益（5满分）
2
crypto-js性能差
类型
帧率
解决方法
排查buffer.from关键字，加密建议使用原生的cryptoFramework，然后将buffer替换为base64helper，性能提升10倍以上，
且数据量越大越明显。
反例
new Uint8Array(buffer.from(str,'base64').buffer);
正例
let that = new util.Base64Helper();
let result = that.decodeSync(str);
高频程度&收益（5满分）
2
不建议使用Marquee组件
类型
响应时延/完成时延
解决方法
排查Marquee关键字，使用Text的跑马灯模式(TextOverflow.MARQUEE)替代。
反例
build() {
Column() {
Marquee({
start: this.start,
step: this.step,
loop: this.loop,
fromStart: this.fromStart,
src: this.src
})
.width(360)
.height(80)
.fontColor('#FFFFFF')
.fontSize(48)
.fontWeight(700)
.backgroundColor('#182431')
.margin({ bottom: 40 })
.onStart(() => {
console.info('Marquee animation complete onStart')
})
.onBounce(() => {
console.info('Marquee animation complete onBounce')
})
.onFinish(() => {
console.info('Marquee animation complete onFinish')
})
}
}
正例
Text(reply.user)
.maxLines(1)
.textOverflow({overflow: TextOverflow.MARQUEE }) // 跑马灯模式
.width("30%")
高频程度&收益（5满分）
1
不能使用函数作为ArkUI组件的属性和组件复用的自定义组件的入参
类型
完成时延
解决方法
查看属性是否有xx()函数写法，确认函数/方法中是否有耗时操作，替换成变量。
反例
build() {
Column() {
List() {
LazyForEach(this.data, (item: string) => {
ListItem() {
// 此处sum参数是函数获取的，每次组件复用都会重复触发此函数的调用
ChildComponent({ desc: item, sum: this.count() })
}
.width('100%').height(100)
}, (item: string) => item)
}
}
正例
struct view {
@State sum: number = 0;
aboutToAppear(): void {
this.sum = this.count();
}
build() {
Column() {
List() {
LazyForEach(this.data, (item: string) => {
Listltem() {
ChildComponent({ desc: item, sum: this.sum })
}
.width('100%').height(100)
}, (item: string) => item)
}
}
}
}
高频程度&收益（5满分）
1
删除多余的import，会影响页面的启动时间
类型
完成时延
解决方法
排查所有import代码，删除无用的引入。
反例
// 优化减少import的模块
// import ability from '@ohos.ability.ability';
// import dataUriUtils from '@ohos.ability.dataUriUtils';
// import errorCode from '@ohos.ability.errorCode';
// import featureAbility from '@ohos.ability.featureAbility';
// import particleAbility from '@ohos.ability.particleAbility';
// import wantConstant from '@ohos.ability.wantConstant';
// import common from '@ohos.app.ability.common';
// import Configuration from '@ohos.app.ability.Configuration';
// import contextConstant from '@ohos.app.ability.contextConstant';
// import ConfigurationConstant from '@ohos.app.ability.ConfigurationConstant';
// import FormExtensionAbility from '@ohos.app.form.FormExtensionAbility';
// import GesturePath from '@ohos.accessibility.GesturePath';
// import GesturePoint from '@ohos.accessibility.GesturePoint';
// import distributedAccount from '@ohos.account.distributedAccount';
// import osAccount from '@ohos.account.osAccount';
import AbilityConstant from '@ohos.app.ability.AbilityConstant';
import UIAbility from '@ohos.app.ability.UIAbility';
import Want from '@ohos.app.ability.Want';
import window from '@ohos.window';
import logger from '../common/Logger';
export default class EntryAbility extends UIAbility {
// ...
}
正例
import AbilityConstant from '@ohos.app.ability.AbilityConstant';
import UIAbility from '@ohos.app.ability.UIAbility';
import Want from '@ohos.app.ability.Want';
import window from '@ohos.window';
import logger from '../common/Logger';
export default class EntryAbility extends UIAbility {
// ...
}
高频程度&收益（5满分）
1
不建议使用.linearGradient颜色渐变属性
类型
完成时延
解决方法
排查linearGradient关键字，可以使用图片代替。
反例
Row()
.linearGradient({
angle: 90,
colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
})
正例
Image($r('app.media.gradient_color'))
高频程度&收益（5满分）
1
不要在for/while循环中执行耗时操作
类型
完成时延/帧率
解决方法
排查for/while循环，查看里面是否有打印日志或者Trace。
反例
@Component
struct Page {
@State message: string = "";
build() {
Column() {
Button('点击打印日志').onClick(() => {
for (let i = 0; i < 10; i++) {
console.debug(this.message);
}
})
}
}
}
正例
@Component
struct Page {
@State message: string = "";
build() {
Column() {
Button('点击打印日志').onClick(() => {
let logMessage: string = this.message;
for (let i = 0; i < 10; i++) {
console.debug(logMessage); // 状态变量需先赋值，再调用会优化性能
}
})
}
}
}
高频程度&收益（5满分）
1
变量初值不建议设置为undefined，需进行默认初始化
类型
完成时延
解决方法
例如number设置为0，string设置为空字符串等，这样在使用过程中更不需要增加额外判空。
排查类中的变量，看看是否有初始化为undefined。
反例
@State channels?: Channels[] = undefined;
正例
@State channels?: Channels[] = [];
高频程度&收益（5满分）
1
1204
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
