diff --git a/ArkUI/Lazy_Loading_Optimizes_Performance/entry/src/main/ets/pages/Index.ets b/ArkUI/Lazy_Loading_Optimizes_Performance/entry/src/main/ets/pages/Index.ets
index bfb9190d4b26c6248dea78b6da3eddc37dde5389..2da5d3f7349279647d7511efed13f8c75b176e2d 100644
--- a/ArkUI/Lazy_Loading_Optimizes_Performance/entry/src/main/ets/pages/Index.ets
+++ b/ArkUI/Lazy_Loading_Optimizes_Performance/entry/src/main/ets/pages/Index.ets
@@ -22,11 +22,11 @@ struct Index {
           }.margin({ left: 10, right: 10 })
         }.onAppear(() => {
           // Record the number of times the component is created through onAppear
-          console.info("appear:" + lazyForEachItem)
+          console.info('appear:' + lazyForEachItem);
         })
       }, (item: string) => {
         // Print the key value in the keyGenerator function
-        console.info("key:" + item)
+        console.info('key:' + item);
         return item;
       })
       // [End Lazy_for_each]
diff --git a/LoadPerformanceInWeb/entry/src/main/ets/pages/CreateNodeController.ets b/LoadPerformanceInWeb/entry/src/main/ets/pages/CreateNodeController.ets
index 91b12669ed008fe2d6552b48670d37f6d0fa9ce4..080f7c37c6bff6ab4d1f45d029513c2e61be2050 100644
--- a/LoadPerformanceInWeb/entry/src/main/ets/pages/CreateNodeController.ets
+++ b/LoadPerformanceInWeb/entry/src/main/ets/pages/CreateNodeController.ets
@@ -26,6 +26,9 @@ function WebBuilder(data:Data) {
       .onPageBegin(() => {
         data.controller.onActive();
       })
+      .onPageEnd(() => {
+        console.info(`load page end time: ${Date.now()}`);
+      })
       .onFirstMeaningfulPaint(() =>{
         if (!shouldInactive) {
           return;
diff --git a/LoadPerformanceInWeb/entry/src/main/ets/pages/PracticalCaseOne.ets b/LoadPerformanceInWeb/entry/src/main/ets/pages/PracticalCaseOne.ets
index c4b679836c96d2e641c7a4a440940660f87ea644..88084ada1ba4b774a670babfcf5a7a22f4e57926 100644
--- a/LoadPerformanceInWeb/entry/src/main/ets/pages/PracticalCaseOne.ets
+++ b/LoadPerformanceInWeb/entry/src/main/ets/pages/PracticalCaseOne.ets
@@ -9,7 +9,7 @@ struct Index {
 
   build() {
     Column() {
-      // Load the business Web component at an appropriate time. This example takes the Button click trigger as an example.在适当的时机加载业务用Web组件，本例以Button点击触发为例
+      // Load the business Web component at an appropriate time. This example takes the Button click trigger as an example.
       Button('加载页面')
         .onClick(() => {
           // Performance dot
diff --git a/LoadPerformanceInWeb/entry/src/main/ets/pages/WebComponentLoad.ets b/LoadPerformanceInWeb/entry/src/main/ets/pages/WebComponentLoad.ets
new file mode 100644
index 0000000000000000000000000000000000000000..8e8699a31d4690dc1d44c16247335f10b6693647
--- /dev/null
+++ b/LoadPerformanceInWeb/entry/src/main/ets/pages/WebComponentLoad.ets
@@ -0,0 +1,19 @@
+// [Start web_component_load]
+import { webview } from '@kit.ArkWeb';
+
+@Entry
+@Component
+struct WebComponent {
+  webviewController: webview.WebviewController = new webview.WebviewController();
+
+  build() {
+    Column() {
+      Button('加载页面')
+        .onClick(() => {
+          this.webviewController.loadUrl('https://www.example1.com/');
+        })
+      Web({ src: 'https://www.example.com/', controller: this.webviewController })
+    }
+  }
+}
+// [End web_component_load]
\ No newline at end of file
diff --git a/animation/README.md b/animation/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..ea674f31d4e95b19a8eee1146d56b55ec0992784
--- /dev/null
+++ b/animation/README.md
@@ -0,0 +1,41 @@
+# **布局优化指导**
+## 介绍
+本例介绍了5种优化手段，分别为使用系统提供的动画接口、使用图形变换属性变化组件布局、参数相同时使用同一个animateTo、多次animateTo时统一更新状态变量、使用renderGroup。通过这些优化手段的单个使用或组合使用，可以对动画帧率、应用卡顿等方面带来优化，提升性能和用户体验。
+
+## 预览效果
+
+|            使用系统提供的动画接口            |           使用图形变换属性变化组件            |        参数相同时使用同一个animateTo        |
+|:---------------------------------:|:---------------------------------:|:---------------------------------:|
+|    ![image](screenshots/1.gif)    |    ![image](screenshots/2.gif)    |    ![image](screenshots/3.gif)    |
+
+## 工程目录
+``` 
+├──entry/src/main/ets                                   // 代码区
+│  ├──entryability
+│  │  └──EntryAbility.ets                               // 程序入口类
+│  ├──entrybackupability
+│  │  └──EntryBackupAbility.ets
+│  └──pages             
+│     ├──CustomAnimation.ets                            // 自定义动画
+│     ├──ExplicitAnimateTo.ets                          // 显式动画实现按键缩放
+│     ├──IconItem.ets                                   // Icon组件
+│     ├──ImageAnimation.ets                             // 改变布局属性
+│     ├──MultipleProperties.ets                         // 参数相同时使用同一个animateTo
+│     ├──PropertyAnimateTo.ets                          // 属性动画实现按键缩放
+│     ├──RenderGroup.ets                                // 使用RenderGroup
+│     ├──UpdateMultipleProperties.ets                   // 在多个animateTo之间更新状态变量        
+│     └──Index.ets                                      // 首页                              
+└──entry/src/main/resources                             // 应用资源目录
+```
+
+## 相关权限
+无
+
+## 约束与限制
+* 本示例仅支持标准系统上运行，支持设备：华为手机。
+
+* HarmonyOS系统：HarmonyOS NEXT Release及以上。
+
+* DevEco Studio版本：DevEco Studio NEXT Release及以上。
+
+* HarmonyOS SDK版本：HarmonyOS NEXT Release SDK及以上。
\ No newline at end of file
diff --git a/animation/screenshots/1.gif b/animation/screenshots/1.gif
new file mode 100644
index 0000000000000000000000000000000000000000..99a1251e624251af3232c9abada796a9aa177c82
Binary files /dev/null and b/animation/screenshots/1.gif differ
diff --git a/animation/screenshots/2.gif b/animation/screenshots/2.gif
new file mode 100644
index 0000000000000000000000000000000000000000..15d8d41dccd3d55f2385d10ed31763ddf21191ca
Binary files /dev/null and b/animation/screenshots/2.gif differ
diff --git a/animation/screenshots/3.gif b/animation/screenshots/3.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6d53e95270296af1ccfda40fe8e365ccb6a7e194
Binary files /dev/null and b/animation/screenshots/3.gif differ