IssueNo:I8J4D4:【Sample】整合readme和测试用例代码混乱问题

Description: 【Sample】整合readme和测试用例代码混乱问题
Sig: SIG_applications_app_samples
Feature or Bugfix: Bugfix
Binary Source: No

Signed-off-by: mashitao1118894 <mashitao2@huawei.com>
This commit is contained in:
mashitao1118894 2023-11-24 11:14:27 +08:00
parent fdbf6a333d
commit 9e14523c3a
8 changed files with 175 additions and 72 deletions

View File

@ -5,9 +5,9 @@
本示例集成了条件渲染、动态加载以及HiDumper等场景来介绍如何提升应用性能。
### 效果预览
| 性能示例主页 | 场景主页 | 正例场景页 | 反例场景页 |
| ------------------------------------- |--------------------------------------------------| -------------------------------------- | ----------------------------------- |
| ![](screenshots/device/PerformanceHomePage.jpeg) | ![](screenshots/device/RenderGroupHomePage.jpeg) | ![](screenshots/device/ProfitScenePage.jpeg) | ![](screenshots/device/NonProfitScenePage.jpeg) |
| 性能示例主页 |
|---------------------------------|
| ![](screenshots/device/Home.jpeg) |
HiDumper使用说明
1.点击性能示例主页的**HiDumper**按钮,进入**HiDumper查看组件信息**场景页。
@ -18,78 +18,163 @@ HiDumper使用说明
3.点击HiDumper查看组件信息场景页的**查看visibility属性**按钮,在场景中依次点击**Visible**、**Hidden**、**Visible**、**None**,查看图片显示和隐藏。
常规加载页面使用说明:
1.点击性能示例主页的**StaticImport**按钮,进入**常规加载入口**场景页。
2.点击常规加载入口的**点击跳转常规加载案例**按钮,进入**常规加载主页**。
3.点击常规加载主页的**pageOne**按钮,进入**常规加载子页面**。
动态加载页面使用说明:
1.点击性能示例主页的**DynamicImport**按钮,进入**动态加载入口**场景页。
2.点击动态加载入口页的**点击跳转动态加载案例**按钮,进入**动态加载主页**。
3.点击动态加载主页的**pageOne**按钮,进入**动态加载子页面**。
ifOrVisibility使用说明
1.点击性能示例主页的**ifOrVisibility**按钮,进入**合理选择条件渲染合显隐控制**场景页,其下有四组场景,八个页面。
2.分别点击**频繁切换:显隐控制页面** **频繁切换:条件渲染页面** ,进入频繁切换场景,可以通过点击**Switch visible and hidden**按钮,实现组件显示与隐藏间的切换,对比完成时延。
3.分别点击**首页渲染:条件渲染页面** **首页渲染:显隐控制页面**,进入首页渲染场景,可以通过点击**Show the Hidden on start**按钮,可以显示首页渲染时,初始被隐藏的组件,对比首页加载渲染完成时延。
4.分别点击**部分修改:条件渲染+容器限制页面**、**部分修改:条件渲染模块**,进入部分修改场景,可以通过点击**Switch Hidden and Show**按钮可以对长列表中Text组件做部分修改对比完成时延。
5.分别点击**复杂子树:条件渲染+组件复用页面**、**复杂子树:条件渲染页面**,进入复杂子树场景,可以通过点击**Change FlexAlign**按钮可以Flex组件中子组件布局方式对比布局修改完成时延。
Grid高性能使用说明
1.点击性能示例主页的**使用LazyFoEach,cachedCount,组件复用**按钮,进入**懒加载+cachedCount+组件复用页面**场景页。
2.点击性能示例主页的**使用columnStart**按钮,进入**使用columnStartcolumnEnd页面**场景页,点击**scrollToIndex:1900**按钮,通过性能打点方式,查看滑动耗时。
3.点击性能示例主页的**使用GridLayoutOptions**按钮,进入**使用GridLayoutOptions页面**场景页,点击**scrollToIndex:1900**按钮,通过性能打点方式,查看滑动耗时。
SmartPerfEditor使用说明
1.打开显隐切换页面,点击**显示/隐藏Image**按钮使用DrawingDoc录制回放功能抓取绘制信息。
SmartPerfHost使用说明
1.点击smartPerfHost示例主页的**SmartPerfHost**按钮,进入**SmartPerfHost查看组件信息**场景页。
2.点击SmartPerfHost查看FrameTimeline优化前场景页的**FrameTimeline优化前代码**按钮进入场景页。
3.点击SmartPerfHost查看FrameTimeline优化后场景页的**FrameTimeline优化后代码**按钮进入场景页。
4.点击SmartPerfHost查看AppStartup优化前场景页的**AppStartup优化前代码**按钮进入场景页。
5.点击SmartPerfHost查看AppStartup优化前场景页的**AppStartup优化后代码**按钮进入场景页。
### 工程目录
```
features
|---/hiDumper/src/main/ets // 列表类功能HAR共享包
|---/dynamicImport/src/main/ets // 动态加载HAR共享包
|---|---/pages
| | |---DynamicContentPageOne.ets // 动态加载子页面
| | |---DynamicEntryView.ets // 动态加载入口页面
| | |---DynaHome.ets // 动态加载主页
|---/grid/src/main/ets // grid类功能HAR共享包
| |---/view
| | |---ConditionView.ets // 显隐切换模块
| | |---GridView.ets // 查看组件树模块
| | |---HidumperHomeView.ets // 场景主页面模块
| | |---VisibilityView.ets // 查看Visibility属性模块
|---/staticImport/src/main/ets // 常规加载HAR共享包
|---|---/pages
| | |---StaticContentPageOne.ets // 常规加载子页面
| | |---StaticContentPageTwo.ets // 常规加载子页面
| | |---StaticEntryView.ets // 常规加载入口页面
| | |---StaticHome.ets // 常规加载主页
|---/dynamicImport/src/main/ets // 动态加载HAR共享包
|---|---/pages
| | |---DynamicContentPageOne.ets // 动态加载子页面
| | |---DynamicEntryView.ets // 动态加载入口页面
| | |---DynaHome.ets // 动态加载主页
|---/ifOrVisibility/src/main/ets // 列表类功能HAR共享包
| | |---GridView.ets // 场景主页面模块
| | |---GridLazyForEachView.ets // 懒加载+cachedCount+组件复用模块
| | |---GridColumnStartView.ets // 使用columnStartcolumnEnd模块
| | |---GridLayoutOptionsView.ets // 使用GridLayoutOptions模块
|---/hiDumper/src/main/ets // 列表类功能HAR共享包
| |---/view
| | |---ConditionView.ets // 显隐切换模块
| | |---GridView.ets // 查看组件树模块
| | |---HidumperHomeView.ets // 场景主页面模块
| | |---VisibilityView.ets // 查看Visibility属性模块
|---/ifOrVisibility/src/main/ets // 列表类功能HAR共享包
| |---/util
| | |---/Constants.ets // 常量
| | |---/Constants.ets // 常量
| |---/model
| | |---/SceneData.ets // 数据类型
| | |---/SceneMsg.ets // 本地数据
| | |---/SceneData.ets // 数据类型
| | |---/SceneMsg.ets // 本地数据
| |---/view
| | |---HidumperHomeView.ets // 场景主页面模块
| | |---HidumperHomeView.ets // 场景主页面模块
| | |---/IfForStartUp
| | | |---BetterUseIf.ets // 首页渲染:条件渲染模块
| | | |---WorseUseVisibility.ets // 首页渲染:显隐控制模块
| | | |---BetterUseIf.ets // 首页渲染:条件渲染模块
| | | |---WorseUseVisibility.ets // 首页渲染:显隐控制模块
| | |---/Reusable
| | | |---AlignContentFlex.ets // Text子组件
| | | |---IfWithoutReusable.ets // 复杂子树:条件渲染+模块
| | | |---IfWithReusable.ets // 复杂子树:条件渲染+组件复用模块
| | | |---MockComplexReusableSubBranch.ets // 模拟复用复杂子组件
| | | |---MockComplexSubBranch.ets // 模拟复杂子组件
| | | |---AlignContentFlex.ets // Text子组件
| | | |---IfWithoutReusable.ets // 复杂子树:条件渲染+模块
| | | |---IfWithReusable.ets // 复杂子树:条件渲染+组件复用模块
| | | |---MockComplexReusableSubBranch.ets // 模拟复用复杂子组件
| | | |---MockComplexSubBranch.ets // 模拟复杂子组件
| | |---/StackForRenderControl
| | | |---RenderControlWithoutStack.ets // 部分修改:条件渲染+容器限制模块
| | | |---RenderControlWithStack.ets // 部分修改:条件渲染模块
| | | |---RenderControlWithoutStack.ets // 部分修改:条件渲染+容器限制模块
| | | |---RenderControlWithStack.ets // 部分修改:条件渲染模块
| | |---/VisibilityForAnimate
| | | |---BetterUseVisibility.ets // 频繁切换:显隐控制模块
| | | |---WorseUseIf.ets // 频繁切换:条件渲染
| | | |---BetterUseVisibility.ets // 频繁切换:显隐控制模块
| | | |---WorseUseIf.ets // 频繁切换:条件渲染
|---/smartPerfEditor/src/main/ets // 显隐类功能HAR共享包
| |---/view
| | |---SmartPerfEditorView.ets // 显隐切换模块
|---/smartPerfHost/src/main/ets // SmartPerfHost功能HAR共享包
| |---/view
| | |---AppStartupBeforeOptimization.ets // 冷启动耗时优化前模块
| | |---AppStartupAfterOptimization.ets // 冷启动耗时优化后模块
| | |---FrameTimelineBeforeOptimization.ets // 丢帧测试优化前模块
| | |---FrameTimelineAfterOptimization.ets // 丢帧测试优化后模块
| | |---SmartPerfHostHomeView.ets // 场景主页面模块
|---/staticImport/src/main/ets // 常规加载HAR共享包
|---|---/pages
| | |---StaticContentPageOne.ets // 常规加载子页面
| | |---StaticContentPageTwo.ets // 常规加载子页面
| | |---StaticEntryView.ets // 常规加载入口页面
| | |---StaticHome.ets // 常规加载主页
products/phone/entry/src/main/ets
|---/entryability
| |---EntryAbility.ts // 封装整个模块启用监听Ability对应的窗口等逻辑
| |---EntryAbility.ts // 封装整个模块启用监听Ability对应的窗口等逻辑
|---/model
| |---/DataType // 数据类型
| |---/MockData // 本地数据
| |---/DataType.ets // 数据类型
| |---/MockData.ets // 本地数据
|---pages
| |---/dynamicImport
| | |---DynamicEntryView.ets // 动态加载入口页面
| | |---DynamicHome.ets // 动态加载主页
| | |---DynamicContentPageOne.ets // 动态加载内容页
| |---/grid
| | |---GridPage.ets // 场景主页面
| | |---GridLazyForEachPage.etss // 懒加载+cachedCount+组件复用页面
| | |---GridColumnStartPage.ets // 使用columnStartcolumnEnd页面
| | |---GridLayoutOptionsPage.ets // 使用GridLayoutOptions页面
| |---/hiDumper
| | |---ConditionPage.ets // 显隐切换页面
| | |---GridPage.ets // 查看组件树页面
| | |---HidumperHomePage.ets // 场景主页面
| | |---VisibilityPage.ets // 查看Visibility属性页面
|---/ifOrVisibility
| | |---IfOrVisibilityPage.ets // 合理选择条件渲染首页
| | |---AnimateBetterUseVisibility.ets // 频繁切换:显隐控制页面
| | |---AnimateWorseUseIf.ets // 频繁切换:条件渲染页面
| | |---IfBetterWithReusable.ets // 首页渲染:条件渲染页面
| | |---IfWorseWithoutReusable.ets // 首页渲染:显隐控制页面
| | |---RenderControlBetterWithStack.ets // 部分修改:条件渲染+容器限制页面
| | |---RenderControlWorseWithoutStack.ets // 部分修改:条件渲染页面
| | |---StartBetterUseIf.ets // 复杂子树:条件渲染+组件复用页面
| | |---StartWorseUseVisibility.ets // 复杂子树:条件渲染页面
| | |---ConditionPage.ets // 显隐切换页面
| | |---GridPage.ets // 查看组件树页面
| | |---HidumperHomePage.ets // 场景主页面
| | |---VisibilityPage.ets // 查看Visibility属性页面
| |---/ifOrVisibility
| | |---IfOrVisibilityPage.ets // 合理选择条件渲染首页
| | |---AnimateBetterUseVisibility.ets // 频繁切换:显隐控制页面
| | |---AnimateWorseUseIf.ets // 频繁切换:条件渲染页面
| | |---IfBetterWithReusable.ets // 首页渲染:条件渲染页面
| | |---IfWorseWithoutReusable.ets // 首页渲染:显隐控制页面
| | |---RenderControlBetterWithStack.ets // 部分修改:条件渲染+容器限制页面
| | |---RenderControlWorseWithoutStack.ets // 部分修改:条件渲染页面
| | |---StartBetterUseIf.ets // 复杂子树:条件渲染+组件复用页面
| | |---StartWorseUseVisibility.ets // 复杂子树:条件渲染页面
| |---/smartPerfEditor
| | |---SmartPerfEditorPage.ets // 显隐切换页面
| |---/smartPerfHost
| | |---AppStartupBeforeOptimizationPage.ets // 冷启动耗时优化前页面
| | |---AppStartupAfterOptimizationPage.ets // 冷启动耗时优化后页面
| | |---FrameTimelineBeforeOptimizationPage.ets // 丢帧测试优化前页面
| | |---FrameTimelineAfterOptimizationPage.ets // 丢帧测试优化后页面
| | |---SmartPerfHostPage.ets // 场景主页面
| |---/staticImport
| | |---StaticEntryView.ets // 常规加载入口页面
| | |---StaticHome.ets // 常规加载主页
| |---/Index // 性能示例首页
| | |---StaticEntryView.ets // 常规加载入口页面
| | |---StaticHome.ets // 常规加载主页
| |---/Index // 性能示例首页
|---/utils
| |---Logger.ets // 封装整个日志
| |---Logger.ets // 封装整个日志
```
@ -119,7 +204,7 @@ products/phone/entry/src/main/ets
* 在Navigation组件加载内容页时使用`await import`实现动态按需加载。
* 源码链接:[DynamicHome.ets](feature/dynamicImport/src/main/ets/pages/DynamicHome.ets)
* ifOrVisibility四个场景分别正反例八个页面
* IfOrVisibility四个场景分别正反例八个页面
* 针对显示和隐藏间频繁切换的场景
* 反例:使用条件循环实现显示和隐藏间的切换; [WorseUseIf.ets](feature\ifOrVisibility\src\main\ets\view\VisibilityForAnimate\WorseUseIf.ets)
* 正例:使用显隐控制实现显示和隐藏间的切换; [BetterUseVisibility.ets](feature\ifOrVisibility\src\main\ets\view\VisibilityForAnimate\BetterUseVisibility.ets)
@ -133,8 +218,27 @@ products/phone/entry/src/main/ets
* 针对反复切换条件渲染的控制分支,且控制分支中的每种分支内,组件子树结构都比较复杂的场景
* 反例:没有使用组件复用实现条件渲染控制分支中的复杂子组件; [IfWithoutReusable.ets](feature\ifOrVisibility\src\main\ets\view\Reusable\IfWithoutReusable.ets)
* 正例:使用组件复用实现条件渲染控制分支中的复杂子组件; [IfWithReusable.ets](feature\ifOrVisibility\src\main\ets\view\Reusable\IfWithReusable.ets)
* 正例:使用组件复用实现条件渲染控制分支中的复杂子组件; [IfWithReusable.ets](feature\ifOrVisibility\src\main\ets\view\Reusable\IfWithReusable.ets)
* 高性能Grid二个场景三个页面
* 针对Grid中使用懒加载cachedCount组件复用的场景
* 在页面上添加GridGridItem使用懒加载设置cachedCount同时对GridItem中的子组件使用组件复用 [GridColumnStartView.ets](feature\grid\src\main\ets\view\GridLazyForEachView.ets)
* 针对Grid中使用scrollToIndex滑动到指定位置的场景
* 反例使用columnStartcolumnEnd设置GridItem大小使用scrollToIndex滑动到指定GirdItem通过性能打点方式查看滑动耗时情况 [GridColumnStartView.ets](feature\grid\src\main\ets\view\GridColumnStartView.ets)
* 正例使用GridLayoutOptions设置GridItem大小使用scrollToIndex滑动到指定GirdItem通过性能打点方式查看滑动耗时情况 [GridLayoutOptionsView.ets](feature\grid\src\main\ets\view\GridLayoutOptionsView.ets)
* SmartPerfEditor一个场景一个页面
* 针对显示图片中查看是否存在冗余绘制的场景
* 在页面上添加显隐切换按钮点击按钮后显示一张图片通过DrawingDoc录制回放功能抓取绘制信息 [SmartPerfEditorView.ets](feature\smartPerfEditor\src\main\ets\view\SmartPerfEditorView.ets)
* SmartPerfHost页面模块
* 应用冷启动,加载绘制页面
* 应用优化前[AppStartupBeforeOptimization.ets](feature/smartPerfEditor/src/main/ets/view/AppStartupBeforeOptimization.ets)
* 应用优化后[AppStartupAfterOptimization.ets](feature/smartPerfEditor/src/main/ets/view/AppStartupAfterOptimization.ets)
* 列表场景丢帧问题优化
* 应用优化前[FrameTimelineBeforeOptimization.ets](feature/smartPerfEditor/src/main/ets/view/FrameTimelineBeforeOptimization.ets)
* 应用优化后[FrameTimelineAfterOptimization.ets](feature/smartPerfEditor/src/main/ets/view/FrameTimelineAfterOptimization.ets)
### 相关权限

View File

@ -22,6 +22,7 @@ export struct StaticEntryView {
Column() {
Button($r('app.string.static_entry_button'))
.fontSize(30)
.id('conventionExample')
.fontWeight(FontWeight.Bold)
.onClick(() => {
router.pushUrl({

View File

@ -145,7 +145,7 @@ export default function abilityTest() {
await driver.delayMs(500);
await staticEntry.click();
await driver.delayMs(500);
let staticImport: Component = await driver.findComponent(ON.text("点击跳转静态加载案例"));
let staticImport: Component = await driver.findComponent(ON.id("conventionExample"));
await driver.delayMs(500);
await staticImport.click();
await driver.delayMs(1000);
@ -205,15 +205,17 @@ export default function abilityTest() {
await back.click();
await driver.delayMs(500);
await driver.pressBack();
await driver.delayMs(500);
Logger.info(TAG, `${BUNDLE}DynamicImportFunction_001 end`);
Logger.info(TAG, `${BUNDLE}DynamicImportFunction_001 end`)
})
/**
* 进入查看SmartPerfHostFrameTimeline优化前页面查看页面是否在正常显示
*/
it(BUNDLE + "SmartPerfHostFrameTimeline01", 555, async (done: Function) => {
Logger.info(TAG, `${BUNDLE}SmartPerfHostFrameTimeline01 begin`);
let driver: Driver = Driver.create();
await driver.delayMs(500);
await driver.delayMs(1000);
await driver.assertComponentExist(ON.text("SmartPerfHost"))
let ifElseComponent: Component = await driver.findComponent(ON.text("SmartPerfHost"));
await driver.delayMs(500);
await ifElseComponent.click();
@ -322,7 +324,6 @@ export default function abilityTest() {
await driver.delayMs(500);
await driver.pressBack();
await driver.delayMs(500);
animateComponent = await driver.findComponent(ON.text("频繁切换:显隐控制"));
await driver.delayMs(500);
await animateComponent.click();
@ -358,7 +359,6 @@ export default function abilityTest() {
await driver.delayMs(500);
await driver.pressBack();
await driver.delayMs(500);
animateComponent = await driver.findComponent(ON.text("首页渲染:显隐控制"));
await driver.delayMs(500);
await animateComponent.click();
@ -385,9 +385,9 @@ export default function abilityTest() {
let animateComponent: Component = await driver.findComponent(ON.text("部分修改:条件渲染+容器限制"));
await driver.delayMs(500);
await animateComponent.click();
await driver.delayMs(1000);
await driver.delayMs(5000);
let showChange: Component = await driver.findComponent(ON.text("Switch Hidden and Show"));
await driver.delayMs(500);
await driver.delayMs(1000);
await showChange.click();
await driver.delayMs(1000);
await showChange.click();
@ -396,7 +396,7 @@ export default function abilityTest() {
await driver.delayMs(500);
animateComponent = await driver.findComponent(ON.text("部分修改:仅条件渲染"));
await driver.delayMs(500);
await driver.delayMs(5000);
await animateComponent.click();
await driver.delayMs(1000);
showChange = await driver.findComponent(ON.text("Switch Hidden and Show"));
@ -419,7 +419,7 @@ export default function abilityTest() {
let driver: Driver = Driver.create();
await driver.delayMs(500);
let animateComponent: Component = await driver.findComponent(ON.text("复杂子树:条件渲染+组件复用"));
await driver.delayMs(500);
await driver.delayMs(3000);
await animateComponent.click();
await driver.delayMs(1000);
let showChange: Component = await driver.findComponent(ON.text("Change FlexAlign"));
@ -432,7 +432,7 @@ export default function abilityTest() {
await driver.delayMs(500);
animateComponent = await driver.findComponent(ON.text("复杂子树:仅条件渲染"));
await driver.delayMs(500);
await driver.delayMs(3000);
await animateComponent.click();
await driver.delayMs(1000);
showChange = await driver.findComponent(ON.text("Change FlexAlign"));
@ -448,8 +448,7 @@ export default function abilityTest() {
Logger.info(TAG, `${BUNDLE}IfOrVisibilityFunction_005 end`);
done();
})
/**
/**
* Grid的使用
*/
it(BUNDLE + "GridFunction_001", 5, async (done: Function) => {
@ -507,7 +506,6 @@ export default function abilityTest() {
Logger.info(TAG, `${BUNDLE}GridFunction_001 end`);
done();
})
/**
* SmartPerf Editor的使用
*/

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB