QQ浏览器器React Native实践

主讲⼈人 王帆部⻔门 QQ浏览器器资讯组

2017.12

关于我

王帆

• 来⾃自QQ浏览器器资讯前端团队

• QQ浏览器器 Feeds React Native 、资讯业务前端⼯工程师

• 熟悉前端开发、⼯工程化，跨平台⽅方案

⽬目录CONTENT

01 技术选型

02 ⼯工程实践

03 监控体系

04 性能优化

第⼀一部分

技术选型

业务场景

图⽂文 视频 购物 互动

我们的痛点

• 接⼊入业务越来越多，如何降低团队沟通成本

• 强内容，弱交互，如何快速响应运营上线

• 每年年发布100+版本，如何降低开发维护成本

• 主场景，亿级⽤用户，如何提升产品体验和性能

新的开发模式！

开发模式对⽐比

单⼀一平台 多平台

部分能⼒力力

全部能⼒力力性能和体验优秀 分平台开发 迭代周期⻓长

前端技术开发逻辑 jsApi提供终端能⼒力力 受限于WebView

性能和体验差 随时发布 开发⻔门槛低

适⽤用场景

•强交互

•灵活度要求不不⾼高

•性能要求极致

• 偏浏览场景

• 迭代速度快

• 性能要求不不⾼高

•原⽣生能⼒力力要求

•迭代速度快

•性能要求不不⾼高

性能堪⽐比原⽣生，迭代速度快，随时发布

我们需要的

开发框架对⽐比

Js Code → Js Bundle → 渲染虚拟Dom → 通过bridge → 原⽣生UI

H5+原⽣生 原⽣生 原⽣生

⽀支持 ⽀支持 ⽀支持

js+wxml+wxss Jsx+css templates+css

AppStore+微信 热更更新 热更更新

⾮非常少 丰富、活跃 不不够丰富、活跃

限制较多 上⼿手容易易 上⼿手容易易

量量少、功能单⼀一 丰富、扩展性强 暂时不不够丰富

实现原理理

渲染组件

设备底层访问

开发语⾔言

更更新策略略

社区资源

开发体验

组件库

不不⾜足应⽤用场景受限 功能有待完善

三端统⼀一不不够 性能需要优化

更更适⽤用电商场景 功能有待完善

第⼆二部分

⼯工程实践

构建发布

组件映射 API映射

Feeds整体架构

⼯工程化

⼯工程化

包管理理

React Native QB

@tencent/react-native-qb @tencent/reactqb-packager @tencent/reactqb-web

List Image

Text Button

…

Wup

…

Alert

Device Media

…

Plugins

ResourceComponents Modules

打包构建 web降级处理理终端依赖

打包

组件化策略略

收紧UI设计权限 所有FT的UI设计由⼀一个团队输出，保证同⼀一标准

标准⼀一致

建⽴立统⼀一组件库 拆分为通⽤用组件、功能组件，底层由⽆无状态的零件组成

结构清晰

组件开发与业务分离 业务开发与组件开发分离， 独⽴立管理理，组件先⾏行行开发

职责分明

沟通对接组件清单 产品、UX、开发、测试都⽤用统⼀一的组件清单来对接，UI、接⼝口保持⼀一致

沟通⾼高效

组件拆分

零 件 组

⼤大图卡⽚片

三图卡⽚片

视频卡⽚片

标题卡⽚片

关注按钮

下载按钮

⽤用户头像

时间标签

负反馈

…

通⽤用卡⽚片组

资讯三图 ⼴广告⼤大图

⼩小说推荐 视频播放

游戏下载

…

功能卡⽚片组

缓存管理理 数据处理理

服务请求 游戏加载

下载进度

…

⼯工程化

⼯工程化

构建发布平台

三端融合-web端

React-native-web + 增量量扩展组件 + qb特性

⼊入⼝口差异 + webpack配置差异 + loaders特别处理理

纯组件 + 业务逻辑 + redux数据管理理

场景

⽅方案

打包构建

同构

差异化qb特有Modules + ⽹网络请求 + RN独有能⼒力力：存储、路路由等

降级处理理空实现 + jsApi + 分环境实现

sdk加载失败 + 分享场景 0.01%

第三部分

监控体系

单引擎，多业务

1.如何抓到异常堆栈？

2.单业务crash，怎样不不影响其他业务？

3.线上js更更新异常，如何不不影响产品使⽤用？

堆栈上报

MessageQueue.js调⽤用guard

ErrorUtils.js调⽤用reportFatalError

InitializeCore.js

ExceptionsManager.js

调⽤用handleError

ExceptionsManager Module.java

调⽤用handleException

分析上报信息

在reportSoftException⾥里里⾯面做拦截上报

灯塔系统

业务隔离

MessageQueueThreadImpl.java调⽤用handleException

QueueThreadExceptionHandler.java

…CatalystInstanceImpl.java调⽤用onNativeException

安全沙箱

更更新策略略启动检测更更新

是否需要 更更新

是

是否差量量 更更新

是

校验⽂文件⼤大⼩小 下载差量量⽂文件

解压并对dif⽂文件md5校验

对base⽂文件md5校验并patch

更更新完成

否 校验⽂文件⼤大⼩小 下载全量量⽂文件

解压并对dif⽂文件md5校验

异常处理理

启动加载本地 的jsbundle

在线更更新jsbundle

下次启动使⽤用 更更新的jsbundle

crash是否达到阈值

渲染完成

否

是加载上⼀一个稳定的jsbundle

⼯工程化

引擎加载

jsbundle升级

模块加载

第四部分

性能优化

性能优化

最初版RN化效果 7.7版本优化后效果

优化700ms！

埋点统计

QB RN启动

引擎初始化 业务JS加载 业务JS逻辑 渲染上屏

NativeModule加载 342ms 加载main jsbundle 90ms

其他 74ms480ms 330ms 810ms

性能优化

Bundle裁剪⾸首屏

加载React Native引擎

数据离线数据+预加载

性能listView优化

bundle裁剪

⽤用js开发业务

1.业务js 2.浏览器器公共组件 3.RN官⽅方模块 4.console.log()

打包

1.es6转换 2.混淆 3.处理理依赖

⽣生成jsbundle 终端获取jsbundle执⾏行行

拆包

拆包

默认打包

—400kb

common.js裁包

—300kb

性能优化—⾸首屏时间

优化项 优化耗时

1 删掉⽆无⽤用的native modules和views以及对应的js代码 —70ms

2 线程初始化native modules与加载common.jsbundle并⾏行行 —90ms

3 initBridge等逻辑与加载feeds.jsbundle并⾏行行 —100ms

4 解析业务代码时加载组件改为懒加载⽅方式 —270ms

5 ListView 加载元素按当前屏幕⾼高度，性能优化 —200ms

6 部分跨线程的操作去掉中转过程等

7 其他优化：闪屏/活动⻚页预加载，⾮非⾸首次加载数据离线缓存等 —

总计 —700ms+

官⽅方ListView

第⼀一条

第⼆二条

第三条

第四条

第五条

第六条

第七条

第⼀一条

第⼆二条

第三条

第四条

第五条

第六条

第七条

原⽣生listView滑动

第⼋八条

第⼋八条

ListView优化

第⼀一条

第⼆二条

第三条

第四条

第五条

第六条

第七条

前端

第⼀一条

第⼆二条

第三条

第四条

第五条

第六条

终端

终端虚拟Node截获所有消息 滑动且复⽤用

内容复⽤用

结构复⽤用

优化结果

对⽐比项 QB7.5(native) QB7.7(React Native) 原⽣生React Native

帧率 58 57 50

内存上涨（200条数据） 32M 39M（包括RN引擎） 87M

Feeds⾸首屏速度 1.7s 2.0s 3.2s

⻚页⾯面加载成功率 100% 99.993% 99.965%

在线更更新速度 （24⼩小时）

—— ⽇日活⽤用户98% ——

Feeds ⽇日UV超4000W ⽇日PV超1亿

Thanks!