Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Docs
提交
1f180c76
D
Docs
项目概览
OpenHarmony
/
Docs
10 个月 前同步成功
通知
158
Star
292
Fork
28
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
Docs
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
未验证
提交
1f180c76
编写于
9月 05, 2023
作者:
O
openharmony_ci
提交者:
Gitee
9月 05, 2023
浏览文件
操作
浏览文件
下载
差异文件
!23862 性能最佳实践适配ArkTS
Merge pull request !23862 from sunqi/master
上级
920417ce
71a10b16
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
47 addition
and
53 deletion
+47
-53
zh-cn/application-dev/performance/improve-application-startup-and-response/improve-application-cold-start-speed.md
...rtup-and-response/improve-application-cold-start-speed.md
+6
-8
zh-cn/application-dev/performance/improve-application-startup-and-response/improve-application-response.md
...tion-startup-and-response/improve-application-response.md
+25
-28
zh-cn/application-dev/performance/reduce-frame-loss-and-frame-freezing/reduce-animation-frame-loss.md
...me-loss-and-frame-freezing/reduce-animation-frame-loss.md
+7
-7
zh-cn/application-dev/performance/reduce-frame-loss-and-frame-freezing/reduce-view-nesting-levels.md
...ame-loss-and-frame-freezing/reduce-view-nesting-levels.md
+9
-10
未找到文件。
zh-cn/application-dev/performance/improve-application-startup-and-response/improve-application-cold-start-speed.md
浏览文件 @
1f180c76
...
...
@@ -69,12 +69,12 @@ OpenHarmony的应用冷启动过程大致可分成以下四个阶段:应用进
aboutToAppear函数会在创建自定义组件实例后,页面绘制之前执行,以下代码在aboutToAppear中对耗时长的计算任务进行了异步处理,避免在该接口执行该耗时操作,不阻塞页面绘制。
```
java
script
```
type
script
@
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
浏览文件 @
1f180c76
...
...
@@ -13,7 +13,7 @@
OpenHarmony提供的Image组件默认生效异步加载特性,当应用在页面上展示一批本地图片的时候,会先显示空白占位块,当图片在其他线程加载完毕后,再替换占位块。这样图片加载就可以不阻塞页面的显示,给用户带来良好的交互体验。因此,只在加载图片耗时比较短的情况下建议下述代码。
```
java
script
```
type
script
@
Entry
@
Component
struct
ImageExample1
{
...
...
@@ -37,10 +37,10 @@ struct ImageExample1 {
建议:在加载图片的耗时比较短的时候,通过异步加载的效果会大打折扣,建议配置Image的syncLoad属性。
```
java
script
```
type
script
@
Entry
@
Component
struct
ImageExample
1
{
struct
ImageExample
2
{
build
()
{
Column
()
{
Row
()
{
...
...
@@ -63,7 +63,7 @@ struct ImageExample1 {
OpenHarmony提供了
[
TaskPool线程池
](
../../reference/apis/js-apis-taskpool.md
)
,相比worker线程,TaskPool提供了任务优先级设置、线程池自动管理机制,示例如下:
```
java
script
```
type
script
import
taskpool
from
'
@ohos.taskpool
'
;
@
Concurrent
...
...
@@ -78,7 +78,7 @@ function computeTask(arr: string[]): string[] {
@
Entry
@
Component
struct
AspectRatioExample
{
struct
AspectRatioExample
3
{
@
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声明成异步任务,主线程可以先进行用户反馈-绘制初始页面。等主线程空闲时,再执行异步任务。等到异步任务运行完毕后,重绘相关组件刷新页面。
```
java
script
```
type
script
@
Entry
@
Component
struct
AspectRatioExample
{
struct
AspectRatioExample
4
{
@
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容器内的所有组件都会刷新:
```
java
script
```
type
script
@
Entry
@
Component
struct
StackExample
{
struct
StackExample
5
{
@
State
isVisible
:
boolean
=
false
;
build
()
{
...
...
@@ -175,10 +172,10 @@ struct StackExample {
建议:对于这种受状态变量控制的组件,在if外套一层容器,减少刷新范围。
```
java
script
```
type
script
@
Entry
@
Component
struct
StackExample
{
struct
StackExample
6
{
@
State
isVisible
:
boolean
=
false
;
build
()
{
...
...
@@ -208,11 +205,11 @@ struct StackExample {
反例:this.arr中的每一项元素都被初始化和加载,数组中的元素有10000个,主线程执行耗时长。
```
java
script
```
type
script
@
Entry
@
Component
struct
MyComponent
{
@
State
arr
:
number
[]
=
Array
.
from
(
Array
(
10000
),
(
v
,
k
)
=>
k
);
struct
MyComponent
7
{
@
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一般只加载可见的元素,避免一次性初始化和加载所有元素。
```
java
script
```
type
script
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
浏览文件 @
1f180c76
...
...
@@ -6,7 +6,7 @@
反例:应用使用了自定义动画,动画曲线计算过程很容易引起UI线程高负载,易导致丢帧。
```
java
script
```
type
script
@
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实现上述动效功能。
```
java
script
```
type
script
@
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实现上述动效功能。
```
java
script
```
type
script
@
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
浏览文件 @
1f180c76
...
...
@@ -6,16 +6,16 @@
反例:使用了Grid来实现一个网格,但是在外层套了3层stack容器,导致组件刷新和渲染耗时长。
```
java
script
```
type
script
@
Entry
@
Component
struct
AspectRatioExample
{
@
State
children
:
Number
[]
=
Array
.
from
(
Array
(
900
),
(
v
,
k
)
=>
k
);
struct
AspectRatioExample
12
{
@
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
AspectRatioExample
11
{
@
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
)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录