Hippy 业务冷启动性能优化指引

背景

经常有业务咨询 Hippy 有哪些优化手段，以及业务性能问题应该怎么分析，有哪些监控工具，本篇文档则系统的介绍了 Hippy 冷启动的性能优化的最佳实践。

冷启动阶段：

介绍一下Hippy应用冷启动有哪些阶段

1. Hippy 运行环境启动 - 终端耗时（启动）

2. 加载 Bundle的 JS 文件 - JS 引擎耗时（自执行）

3. 应用实例的执行 - JS 引擎耗时（JS运行）

a. 业务代码逻辑执行

b. 业务 IO（网络、JS API）等待

c. React/Vue 框架 DIFF 耗时

d. Hippy JS SDK计算耗时

4. 上屏显示 - 终端耗时（渲染）

a. Hippy DOM 构建、排版耗时

b. Hippy 渲染上屏耗时

详细介绍参考：Hippy冷启动核心逻辑和数据梳理

我们把启动阶段分为 4个阶段：Hippy 启动、Bundle加载、应用实例执行、渲染上屏。

不同规模的 Hippy 业务，这些阶段耗时不尽相同，大家可以先测试各阶段耗时占比，再针对性的来分析。

Hippy 团队过去有一些经验可供参考：

1. 一般耗时大头是阶段 3 （一半耗时占比超过 50%）

业务可重点排查 业务 JS 执行耗时、**IO（网络、JS API）等待耗时。**此外，节点数过多、CSS 属性比较复杂，也会影响 Hippy SDK的计算耗时

2. JS Bundle包过大，会影响阶段 2 的耗时

3. 节点数过多，节点层级比较深，渲染样式比较复杂，会影响阶段 3 的耗时

如何监控定位：

1. 线上监控：

在 Hippy 3.0，我们设计了用于性能分析的 Performance API:

Hippy 性能监控设计文档

Performance API 冷启动打点指标：

指标	对应 Key
Hippy 引擎加载开始	hippyNativeInitStart
JS 引擎加载开始	hippyJsEngineInitStart
JS 引擎加载结束	hippyJsEngineInitEnd
Hippy 引擎加载结束	hippyNativeInitEnd
JS Bundle 自执行耗时	bundleInfo[]
业务入口执行开始	hippyRunApplicationStart
业务入口执行结束	hippyRunApplicationEnd
首帧绘制开始	hippyFirstFrameStart
首帧绘制结束	hippyFirstFrameEnd
启动耗时	duration

监控方式：

1. Hippy 3.x版本：可以接入最新 aegis-sdk （腾讯内部咨询端框架小助手），已经基于 performance api，可以直接获取打点数据

2. Hippy 2.x 版本可以基于业务代码打点，获取启动阶段的近似耗时数据。可参考：https://km.woa.com/articles/show/557810?kmref=search&from_page=1&no=1

2. Profile 工具：

1. Perfdog

a. 可查看 FPS, CPU, GPU, 内存等变化情况

2. 安卓系统自带工具：

a. GPU 渲染模式分析：通过在 Android 设备的设置 APP 的开发者选项里打开 “ GPU 渲染模式分析” 选项，选择 ” 在屏幕上显示为条形图 “ 。

b. 过度绘制：Android 设备的设置 APP 的开发者选项里打开 “ 调试 GPU 过度绘制 ”

c. 查看界面边界：系统设置 – 开发者选项 – 绘图 --显示布局边界

3. iOS系统 simulator 模拟器

a. Debug 下自带分析工具 Color Blended Layers 图层绘制 Color Off-screen Rendered 离屏渲染

4. Profile工具

a. Android Studio Profiler

b. Xcode Instruments

c. Hippy Devtools （也在进一步完善中，欢迎大家提需求），如下示例：

如何优化：

定位到耗时点，接下来就可以针对性分析。

先简单介绍常用的优化：

1. 预加载：大幅降低 1-2 阶段耗时

2. 预渲染/SSR/Native-Vue：大幅降低 1-3阶段耗时

3. 数据预拉取：降低 3阶段 IO 等待耗时

4. JSI、动态加载、节点数优化：降低 3 阶段耗时

5. 节点缓存/渲染优化/图片缓存：降低 4 阶段耗时

6. 骨架屏优化/Loading：优化交互体验

...

接下来详细介绍这些优化点：

1. 预加载

通过提前执行1+2阶段逻辑优化首屏耗时。

这两个阶段耗时主要被封装在HippyBridge中，因此可以通过提前初始化HippyBridge达成目的。

iOS 代码示例：

javascript

HippyBridge *bridge = [[HippyBridge alloc] initWithDelegate:nil bundleURL:url moduleProvider:^NSArray<id<HippyBridgeModule>> * {
        return nil; // 或返回希望替换的module实例
} launchOptions:option executorKey:nil];

// 将bridge保存起来

安卓代码示例：

javascript

mHippyEngine.initEngine(new HippyEngine.EngineListener() {
    @Override
    public void onInitialized(EngineInitStatus statusCode, String msg) {
        if (statusCode == EngineInitStatus.STATUS_OK) {
            HippyBundleLoader loader = ...;
            // e.g.:
            // new HippyAssetBundleLoader(context, assetName, true, "demo");
            // new HippyFileBundleLoader(filePath, true, "demo");
            mHippyEngine.preloadModule(loader);
        }
    }
}

优点：

1. 不依赖页面数据，在任何页面都可考虑使用预加载

2. 前端也可以在预加载时提前fetch数据

缺点：

1. 优化效果相对预渲染不够明显

2. 预渲染

如果还希望在预加载基础上继续优化体验，还可以进一步提前执行步骤 3 的逻辑。

优点：

1. 优化效果十分明显

缺点：

1. 内存开销大

2. 无法对动态数据的页面使用

3. 页面发版会导致命中率降低

4. 预渲染时的Dimension可能与访问时不一致，导致布局异常

5. 在Android上预渲染只能使用AppContext，导致页面打开后也无法使用依赖Activity的能力，例如Modal（Dialog）组件

接入代码示例：

iOS 代码示例

javascript

HippyRootView *hippyRootView = [[HippyRootView alloc]    
                            initWithBridge:bridge
                               businessURL:businessURL
                                moduleName:appName                  
                         initialProperties:properties         
                                  delegate:delegate];
// 将hippyRootView保存起来

执行这一步后，HippyRootView内部将会执行实例的加载，但由于rootView未被真正挂在到VC的UI树上，所以暂时不可见。

当需要显示的时候可以在VC的view上将hippyRootView加为子view。

javascript

[parent addSubview:hippyRootView];

// 必要时可以更新一下frame
hippyRootView.frame = newFrame;

// 如果在addSubview后还有其他的subview的添加，可以考虑通过bringSubviewToFront将hippyRootView改为最前方显示
[parent bringSubviewToFront:hippyRootView];

安卓代码示例：

除了需要把 ModuleLoadParams.context 设置为 AppContext 外，其余步骤和常规加载一致。

javascript

HippyEngine.ModuleLoadParams loadParams = new HippyEngine.ModuleLoadParams();
loadParams.context = getApplicationContext();
...
mHippyView = mHippyEngine.loadModule(loadParams, listener, null);

3. SSR

SSR 代替预渲染方案的另一选择。

方案原理：把 1-3 阶段放在服务端执行，解析成最终的 Hippy指令的字符串，启动时直接反序列化 Hippy指令，下发Hippy终端执行渲染。

优化效果：性能数据与预渲染接近

详见QQ游戏中心优化 https://km.woa.com/articles/show/564026?kmref=search&from_page=1&no=1

优点：

1. 可不依赖终端方案方案，前端执行

2. 相比预渲染方案更节省内存

缺点：

1. 需要执行事件挂载逻辑，可交互时间会延迟

2. 会带来服务器的运营成本

4. 数据预请求：

在不方便应用预渲染/SSR/Native-Vue的场景。可以考虑提前下载数据，节省 3阶段网络 IO 耗时：

1. 可以在终端预请求，在启动Hippy后，把数据传给前端

2. 可以结合预加载，在前端 JS 自执行阶段，前端预请求数据。等待组件渲染时直接使用。

5. 节点缓存

1. Dom Node 缓存（安卓）

接入方案详见：https://doc.openhippy.com/#/feature/feature2.0/dom-cache

2. RenderNode 缓存（3.0 安卓）

接入方案详见：https://doc.openhippy.com/#/feature/feature3.0/render-node-snapshot

6. JS 引擎优化

在不方便做 JS 预加载的场景，如果要优化 JS 自执行耗时，可以考虑对 JS 引擎本身做优化：

6.1. V8 编译开启 Code Cache

把编译和解析的结果缓存下来，等到下次遇到相同的文件，直接跳过这个过程，把直接缓存好的数据拿来使用；

Hippy 2.0: Hermes 接入指引文档：https://iwiki.woa.com/p/4007348225

Hippy 3.0 Hermes会直接集成，文档待补充。

7. bundle 包动态加载

接入文档指引：https://iwiki.woa.com/p/491739348

Hippy 打包插件只支持一个jsbundle包的生成。随着业务逻辑越来越复杂，jsbundle越来越大、包的加载时间越来越长。为了解决这个问题，Hippy 在 2.2.0 版本增添了动态加载能力，Hippy 的开发人员可以按照业务需求来动态引入 JS。

Hippy 在 2.5.5 版本增加了远程网络加载模式的支持，业务可对每个bundle自定义不同的加载模式。

webpack打包脚本中引入插件：HippyDynamicImportPlugin

javascript

const HippyDynamicImportPlugin = require('@hippy/hippy-dynamic-import-plugin');

module.exports = {
  ...
  plugins: [
    new HippyDynamicImportPlugin(),
  ],
};

（1）加载本地 JS 包：

与 Web 开发动态加载能力一样，直接使用 import() 语法即可

（2）加载远程 JS 包：

i. webpack打包脚本配置全局 publicPath(可选)

javascript

 // webpack output 配置
 output: {
    ...
    publicPath: 'https://xxxx/hippy/hippyVueDemo/',
},

ii. 在业务代码引用分包的入口配置 magic comment的 webpackChunkName（必须）和 customChunkPath（可选），如果没有配置customChunkPath，会默认使用全局 publicPath；以 Hippy-Vue 为例：

javascript

 // Hippy-Vue 配置
 AsyncComponentFromHttp: () => import(/* customChunkPath: "https://xxx/hippy/hippyVueDemo/", webpackChunkName: "asyncComponentFromHttp" */'./dynamicImport/async-component-http.vue')
  .then(res => res)
  .catch(err => console.error('import async remote component error', err))

8. JS API 优化

8.1. JS Bridge -> JSI

接入方案详见：https://doc.openhippy.com/#/feature/feature2.0/jsi

优化效果：

Android 代码示例：

javascript

// 初始化引擎开启 enableTurbo
val initParams = HippyEngine.EngineInitParams()
initParams.enableTurbo = true

// 定义 module
@HippyNativeModule(name = "demoTurbo")
class DemoTurboModule(context: HippyEngineContext?) : HippyNativeModuleBase(context) {
    ...
    @HippyMethod(isSync = true)
    fun getNum(num: Double): Double = num
    ...
}

iOS 代码示例：

javascript

// 方式一：bridge初始化时通过配置参数设置生效
NSDictionary *launchOptions = @{@"EnableTurbo": @(DEMO_ENABLE_TURBO)};
HippyBridge *bridge = [[HippyBridge alloc] initWithDelegate:self
                                                  bundleURL:[NSURL fileURLWithPath:commonBundlePath]
                                             moduleProvider:nil
                                              launchOptions:launchOptions
                                                executorKey:@"demoTurbo"];

// 方式二：bridge初始化完成后，设置属性生效
HippyRootView *rootView = [[HippyRootView alloc] initWithBridge:nil
                                                    businessURL:nil
                                                     moduleName:@"demoTurbo" 
                                              initialProperties:@{@"isSimulator": @(isSimulator)} 
                                                  launchOptions:nil 
                                                   shareOptions:nil 
                                                      debugMode:YES 
                                                       delegate:nil];
rootView.bridge.enableTurbo = YES;

javascript

@implementation TurboConfig

...

// 注册模块
HIPPY_EXPORT_TURBO_MODULE(TurboConfig)

// 注册交互函数
HIPPY_EXPORT_TURBO_METHOD(getInfo) {
    return self.strInfo;
}
HIPPY_EXPORT_TURBO_METHOD(setInfo:(NSString *)string) {
    self.strInfo = string;
    return @(YES);
}

...

@end

Hippy-React 代码示例：

https://github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/src/externals/Turbo/demoTurbo.js

Hippy-Vue 代码示例：

https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demoTurbo.js

8.2. 减少首屏 JS API 调用次数

9. Hippy-Vue 优化

1. 减少 getElemCss 方法的调用

javascript

Vue.Native.getElemCss()

2. 减少 scoped 的使用

vue scoped 能力是 2.15.0 版本引入，scoped会转换为属性选择器，因此解析性能会比较差；

在 Hippy 3.0 版本，我们使用 css-module的方案优化了 scoped的解析方式，性能得到提升。

3. 减少 CSS 属性选择器、伪类等样式的使用

4. 升级 Hippy-Vue-Next（Vue3）

Vue3 升级指引：https://hippyjs.org/#/hippy-vue/vue3

Vue3 相比 Vue2 做了 Diff算法优化、静态提升、事件缓存等优化，从Vue框架层面会带来性能提升。实测了 Vue3 和 Vue2 在Hippy框架下的数据对比：

10. Hippy-React 优化

1. Hippy React节点更新优化：

https://iwiki.woa.com/p/1335183393

@hippy/react 在 2.12.0 版本应用上了最新的渲染优化，针对 react 16 和 react 17，先删除原来的 react-reconciler 包依赖，再分别引入

javascript

"@hippy/react-reconciler": "react16"
"@hippy/react-reconciler": "react17"

11. 渲染优化：

1. 减少首屏节点数、节点层级

可以借助客户端 IDE 来直观地查看 "DOM" 树，使用前端的 DevTools 的 View 树来检查冗余节点。

2. 减少节点重复渲染的次数

可以在高频渲染节点的 render 函数中打点统计。
使用 shouldComponentUpdate、PureComponent 等优化重复渲染。

3. 节点优化：节点合并，扁平化（触发 Hippy 引擎优化）

减少冗余事件挂载。

4. 圆角、裁剪、描边等渲染性能较差，尽量减少使用

5. 减少过度绘制

移除重复的背景色。
减少图层覆盖。

6. ListView

尽量使用 ListView 代替 ScrollView，ListView 通过 View 的缓存与重用大大提升渲染性能。
使用 getRowType，将 item 按类型合理拆分，同一类型的 item 的 RowType 相同，可复用。
严格保持 ListView item 的 DOM 结构一致：
- hippy-vue：item 中的节点可以用 v-show，不要用 v-if。
- hippy-react：item 中的节点尽量不要用 if 条件来改变节点结构。

7. ViewPager

ViewPager 的子节点尽量不要全加载，实现懒加载。

8. Image

图片压缩。
图片按需加载。
避免同时使用 src 和 background。
大图放 CDN。
减少 base64 图片使用。
图片缓存（内存缓存、磁盘缓存）。

代码示例：在自定义ImageLoader中实现自己的缓存逻辑，也可使用第三方图片加载库，如 slide 等。

javascript

HippyEngine.EngineInitParams initParams = new HippyEngine.EngineInitParams();
// 必须：宿主（Hippy的使用者）的Context
// 若存在多个Activity加载多个业务jsbundle的情况，则这里初始化引擎时建议使用Application的Context
initParams.context = this;
...
// 必须：图片加载器
initParams.imageLoader = new MyImageLoader(this.getApplicationContext());

12. 业务逻辑执行优化

此外，也要检查业务代码自身的耗时，并做针对性优化。

1. 防抖节流：对滚动事件、数据上报等进行防抖节流，避免频繁触发计算

2. 耗时逻辑检查是否可以放在首屏后执行

13. 交互优化

除了上面的优化手段，交互优化在一些场景也是十分重要的，可以提升打开体验，让页面视觉上更流畅。

1. 骨架屏优化

2. Loading

3. 切换动画

总结：

优化总结、是否需要终端/前端同学支持。

优化方案	方案介绍	接入成本	优化效果	终端/前端工作
预加载	优化 JS Bundle包加载	中	中	终端工作
预渲染	基于预加载，进一步优化渲染耗时	中	好	终端工作
SSR	预渲染的替代方案	中	好	前端工作
Native-Vue	预渲染的另一种替代方案	高	好	前端工作
数据预请求	节省 IO 耗时	低	中	终端或前端工作
节点缓存	仅安卓支持，优化渲染耗时明显	低	中	终端工作
JS引擎优化（Hermes）	性能比JSC优化明显	高	好	终端工作
Bundle动态加载	分包加载，节省 JS 执行耗时	中	中	前端工作
JS API优化（JSI）	JSI 接口同步调用，等待耗时降低	低	中	前端工作
Hippy-Vue 逻辑优化	优化 css 解析耗时	低	好	前端工作
Hippy-React 逻辑优化	渲染队列优化	低	中	前端工作
渲染优化	组件使用的渲染耗时优化	低	中	前端工作
业务逻辑优化	业务自身逻辑优化	无	中	前端工作
交互优化	业务自身优化交互	无	体验上优化	前端工作