diff --git a/docs/assets/img/3.0-performance-fps.png b/docs/assets/img/3.0-performance-fps.png new file mode 100644 index 00000000000..53deac33d72 Binary files /dev/null and b/docs/assets/img/3.0-performance-fps.png differ diff --git a/docs/assets/img/3.0-performance-memory.png b/docs/assets/img/3.0-performance-memory.png new file mode 100644 index 00000000000..3ab10e004b6 Binary files /dev/null and b/docs/assets/img/3.0-performance-memory.png differ diff --git a/docs/assets/img/3.0-performance-start.png b/docs/assets/img/3.0-performance-start.png new file mode 100644 index 00000000000..021a9baf8e4 Binary files /dev/null and b/docs/assets/img/3.0-performance-start.png differ diff --git a/docs/assets/img/3.0-performance0.png b/docs/assets/img/3.0-performance0.png new file mode 100644 index 00000000000..7cc75f1b747 Binary files /dev/null and b/docs/assets/img/3.0-performance0.png differ diff --git a/docs/assets/img/3.0-performance1.png b/docs/assets/img/3.0-performance1.png new file mode 100644 index 00000000000..b94fe94598c Binary files /dev/null and b/docs/assets/img/3.0-performance1.png differ diff --git a/docs/assets/img/3.0-performance2.png b/docs/assets/img/3.0-performance2.png new file mode 100644 index 00000000000..2690dcec0eb Binary files /dev/null and b/docs/assets/img/3.0-performance2.png differ diff --git a/docs/development/react-vue-3.0-upgrade-guidelines.md b/docs/development/react-vue-3.0-upgrade-guidelines.md index 93686c50bb7..d39f6265c7f 100644 --- a/docs/development/react-vue-3.0-upgrade-guidelines.md +++ b/docs/development/react-vue-3.0-upgrade-guidelines.md @@ -4,9 +4,11 @@ --- -# hippy-react +# 依赖升级 -如果业务目前使用 React 来开发 Hippy，可以参考当前章节升级指引。 +### hippy-react + +>如果业务目前使用 React 来开发 Hippy，可以参考当前章节升级指引。
如果当前 @hippy/react 版本小于 2.12.0, 且 React 使用的 16 的版本，则需要升级如下版本： @@ -29,17 +31,7 @@ Hippy-React 在升级3.0可以完全兼容之前的版本，除了升级如上依赖，业务代码不需要做修改。 -验证关注点： - -1. 界面的UI视图渲染正常 （UI结构、样式属性等） -2. UI事件（点击、滑动）等表现正常 -3. 自定义组件渲染正常 -4. 自定义模块通讯正常 -5. 动态加载js bundle流程正常 -6. 页面冷启动、卡顿等性能数据正常 -7. 页面曝光上报/日志上报正常 - -# hippy-vue +### hippy-vue >如果业务目前使用 Vue 2.x 来开发 Hippy，可以参考当前章节升级指引。
@@ -57,17 +49,9 @@ Hippy-React 在升级3.0可以完全兼容之前的版本，除了升级如上 Hippy-Vue 在升级3.0可以完全兼容之前的版本，除了升级如上依赖，业务代码不需要做修改。 -验证关注点：（同Hippy React） -1. 界面的UI视图渲染正常 （UI结构、样式属性等） -2. UI事件（点击、滑动）等表现正常 -3. 自定义组件渲染正常 -4. 自定义模块通讯正常 -5. 动态加载js bundle流程正常 -6. 页面冷启动、卡顿等性能数据正常 -7. 页面曝光上报/日志上报正常 -# hippy-vue-next +### hippy-vue-next >如果业务目前使用 Vue 3.x 来开发 Hippy，可以参考当前章节升级指引。
@@ -83,12 +67,31 @@ Hippy-Vue 在升级3.0可以完全兼容之前的版本，除了升级如上依 Hippy-Vue-Next 在升级3.0可以完全兼容之前的版本，除了升级如上依赖，业务代码不需要做修改。 -验证关注点：（同Hippy React） +
+
+ +# 验证关注点 + +一、Hippy 3.0 前端架构升级主要有如下改动点： +
+1. JS 驱动上屏的方式由 UIManagerModule 变为了 SceneBuilder。 +2. Node API 重新实现了 Move 计算逻辑。 +3. Event 由前端分发变为 DOM 分发。 +4. 动画由 bridge 模块变为 C++ DOM 模块实现。 + +二、需要验证关注点： +
+1. 界面的UI视图渲染正常 （UI结构、样式属性等），特别关注 Hippy-React/Vue 中因为条件渲染语句，产生的节点`Move`操作，表现是否正常。 +2. UI事件（点击、滑动）等表现正常，特别关注事件`冒泡`、`捕获`等表现是否正常。 +3. 关注`动画`表现是否正常。 + +
+
+ +# 新特性 + +### Performance API +Hippy 3.0 我们实现了基于前端规范设计的性能 API，接入方式可参考 [performance](feature/feature3.0/performance.md)。 -1. 界面的UI视图渲染正常 （UI结构、样式属性等） -2. UI事件（点击、滑动）等表现正常 -3. 自定义组件渲染正常 -4. 自定义模块通讯正常 -5. 动态加载js bundle流程正常 -6. 页面冷启动、卡顿等性能数据正常 -7. 页面曝光上报/日志上报正常 +### Layout 引擎支持切换 +Hippy 3.0 我们支持了 Layout 引擎的无缝切换，项目可保持`Yoga`引擎，也可以选择Hippy自研的`Taitank`引擎。详情可参考 [layout](feature/feature3.0/layout.md) diff --git a/docs/feature/_sidebar.md b/docs/feature/_sidebar.md index 571b9bbddd1..a2369a7d15f 100644 --- a/docs/feature/_sidebar.md +++ b/docs/feature/_sidebar.md @@ -3,6 +3,7 @@ - [Layout 引擎切换](feature/feature3.0/layout.md) - [Snapshot](feature/feature3.0/render-node-snapshot.md) - [双端一致性](feature/feature3.0/cross-platform-consistency.md) + - [Performance API](feature/feature3.0/performance.md) - 2.x - [动画](feature/feature2.0/animation.md) - [日志](feature/feature2.0/console.md) diff --git a/docs/feature/feature3.0/_sidebar.md b/docs/feature/feature3.0/_sidebar.md index eb5c3870814..a815791ea40 100755 --- a/docs/feature/feature3.0/_sidebar.md +++ b/docs/feature/feature3.0/_sidebar.md @@ -3,6 +3,7 @@ - [Layout 引擎切换](feature/feature3.0/layout.md) - [Snapshot](feature/feature3.0/render-node-snapshot.md) - [双端一致性](feature/feature3.0/cross-platform-consistency.md) + - [Performance API](feature/feature3.0/performance.md) - 2.0+ - [动画](feature/feature2.0/animation.md) - [日志](feature/feature2.0/console.md) diff --git a/docs/feature/feature3.0/performance.md b/docs/feature/feature3.0/performance.md index d7c6bd069e7..5778a9a682e 100644 --- a/docs/feature/feature3.0/performance.md +++ b/docs/feature/feature3.0/performance.md @@ -1 +1,90 @@ # Performance API + +## 背景 + +过去 Hippy SDK 缺乏对关键性能指标的获取和监控机制，各个业务都需自行打点或者魔改 SDK 进行统计，导致 Hippy 团队和接入业务均没有一个针对性能指标的统一基准，数据解读混乱，因此由 SDK 统一提供标准化的性能监控和指标显得非常有必要。 + +## 指标 + +### 2\.1 启动耗时 + +Web 设计了 Performance API ，其中包含了 PerformanceResourceTiming 和 PerformanceNavigationTiming 接口，用于检索和分析有关加载应用程序资源的详细网络计时数据和首屏加载耗时数据 + +0 +1 + +Hippy 3\.0 新架构参考 Web 标准设计了新的性能 API: + +start + +性能数据获取示例： + +global\.performance\.getEntries\(\): 获取所有的性能指标对象 （PerformanceResource、PerformanceNavigation等） + +global\.performance\.getEntriesByType\('navigation'\): 获取启动加载性能指标对象 + +global\.performance\.getEntriesByType\('resource'\)： 获取资源加载性能指标对象 + +2 + +>PerformanceNavigationTiming： + +| 指标 | 对应 Key | +|----------------|---------------------| +| Hippy 引擎加载开始 | hippyNativeInitStart | +| JS 引擎加载开始 | hippyJsEngineInitStart | +| JS 引擎加载结束 | hippyJsEngineInitEnd | +| Hippy 引擎加载结束 | hippyNativeInitEnd | +| JS Bundle 自执行耗时 | bundleInfo[] | +| 业务入口执行开始 | hippyRunApplicationStart | +| 业务入口执行结束 | hippyRunApplicationEnd | +| 首帧绘制开始 | hippyFirstFrameStart | +| 首帧绘制结束 | hippyFirstFrameEnd | +| 启动耗时 | duration | +| 指标名称 | name | +| 指标类型 | entryType | + +>bundleInfo: + +| 指标 | 对应 Key | +|----------------|---------------------| +| 主包/分包地址 | url | +| 执行js包开始时间 | executeSourceStart | +| 执行js包结束时间 | executeSourceEnd | + +>PerformanceResourceTiming： + +| 指标 | 对应 Key | +|----------------|---------------------| +| 资源地址 | name | +| 请求资源开始时间 | loadSourceStart | +| 请求资源结束时间 | loadSourceEnd | +| 请求耗时 | duration | +| 指标类型 | entryType | + + +- 适用版本：3\.1 + +### 2\.2 内存 + +- 现状：2\.0 已支持 JS 层通过 Performance\.memory 获取到 V8 引擎的内存数据（Hermes 待定） + +memory + +- 适用版本：2\.0、3\.1 + +### 2\.3 流畅度 + +流畅度可通过 FPS 和 Janky Frame 指标来衡量 + +浏览器里提供了 requestAnimationFrame API，浏览器会在屏幕刷新（一帧）时机调用回调函数，JS 可在回调函数中执行动画等逻辑，也可用来计算 FPS 和 janky frame。Hippy 由于 JS 线程与 UI 线程独立，渲染异步执行，若通过终端实现 requestAnimationFrame 无法做到与浏览器一致的数据精确度（JS 层获取到的帧率会小于终端的真实帧率），但也可作为一个通用能力提供给业务作为参考。 + +fps + +- Hippy 3\.0 基于vsync信号重新实现了 requestAnimationFrame API +- 适用版本：3\.1 + +## 三、Aegis\-Hippy 接入 + +aegis\-sdk：1\.42\.4 +