From 28ca834c486993d648d94c4bb9700ac34ff6b6b2 Mon Sep 17 00:00:00 2001
From: xu <chenxu25@huawei.com>
Date: Tue, 13 Sep 2022 20:50:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=87=8F=E5=B0=91=E6=BB=91?=
 =?UTF-8?q?=E5=8A=A8=E7=99=BD=E5=9D=97=E7=9A=84=E8=AF=B4=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: xu <chenxu25@huawei.com>
---
 ...-performance-improvement-recommendation.md | 42 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/zh-cn/application-dev/ui/ts-performance-improvement-recommendation.md b/zh-cn/application-dev/ui/ts-performance-improvement-recommendation.md
index b20f704d11..4f2bc2977b 100644
--- a/zh-cn/application-dev/ui/ts-performance-improvement-recommendation.md
+++ b/zh-cn/application-dev/ui/ts-performance-improvement-recommendation.md
@@ -257,4 +257,44 @@ struct MyComponent {
     }.backgroundColor(Color.Pink)
   }
 }
-```
\ No newline at end of file
+```
+
+## 减少应用滑动白块
+应用通过增大List/Grid控件的cachedCount参数，可以调整UI的加载范围。cachedCount含义是屏幕外，预加载item的个数。<br>如果有网络图片请求，可以在滑动到屏幕显示之前，提前下载好内容，从而减少滑动白块。<br>
+如下是使用cachedCount参数的例子：
+```ts
+@Entry
+@Component
+struct MyComponent {
+  private source: MyDataSource = new MyDataSource()
+  build() {
+    List() {
+      LazyForEach (this.source, item => {
+        ListItem() {
+          Text("Hello" + item)
+            .fontSize(100)
+            .onAppear(()=>{
+              console.log("appear:" + item)
+            })
+        }
+      })
+    }.cachedCount(3)  // 扩大数值可以看到上面appear日志范围会变大
+  }
+}
+class MyDataSource implements IDataSource {
+  data: number[] = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
+  public totalCount(): number {
+    return this.data.length
+  }
+  public getData(index: number): any {
+    return this.data[index]
+  }
+  registerDataChangeListener(listener: DataChangeListener): void {
+  }
+  unregisterDataChangeListener(listener: DataChangeListener): void {
+  }
+}
+```
+**负面影响：**<br>
+cachedCount的增加会增大UI的cpu、内存开销。<br>
+使用时需要根据实际情况，综合性能和用户体验进行调整。
\ No newline at end of file
-- 
GitLab