自我介绍

Shinehuang（黄俊涛） 2011年加入QQ空间 曾负责朋友网web，全民K歌app 现任QQ空间H5工程师 专注于Node.js以及Hybrid App开发

QQ空间Hybrid架构

By Shinehuang(黄俊涛)

Native > H5：



快

Native > H5：

稳定

解决方案

离线包+预加载？

思考

1. 首次进入加速 2. 二次进入秒开

传统H5加载流程

H5加载优化：Max(T1, T2)

H5加载优化： http->socket

如何加速二次进入的显示速度？

Html Cache

升级版etag

Etag sha1(htmlBuffer)

Cache-Offline true ：响应内容进入离线，刷新webview store：响应内容进入离线，如果weview已经存在内容则不刷新 false： 响应内容不进入离线，刷新webview，并清掉本地缓存 无： 响应内容不进入离线，刷新webview，并清掉本地缓存

加载优化+高速通道+离线缓存

测速对比

离线缓存率 还可以做更多？

Html页面结构

H5的增量更新

H5的增量更新

H5的增量更新

还可以做更多？

新的挑战

提高页面可用率 静态资源缓存复用

Html加载JS方法

H5离线操作

异步读写接口接入socket 网络层托管闭环

Native > H5：

3. 标准组件，基础能力 4. 操作流畅度，灵敏度 5. 内存，性能指标

React Native

React Native改造场景

React Native自定义组件

React Native自定义组件

React Native组件性能：<listview>

removeClippedSubviews

React Native组件性能：<listview>

内存无限制增长

React Native组件性能：<listview>

Android：RecyclerView

React Native组件性能：<listview>

手动回收

React Native组件性能：<listview>

React Native启动加速

1. 预加载上下文+常驻 2. 内置bundle，异步更新 3. 预执行jsbundle 4. 数据缓存 5. 首屏结构优化

React Native启动加速

React Native框架Crash

1. AssertError

2. view property crash (15,972) Error while updating property 'text' in shadow node of type: RCTRawText (11,621) Error while updating property 'height' in shadow node of type: RCTView

3. imageLoader crash

React Native版本兼容性

Android4.1以下 Ios7以下

Web前端思考

THANK YOU

Any question？