AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

QQ空间Hybrid架构(H5 App) By Shinehuang(黄俊涛)

发布者 mobile
发布于 1473383325948  浏览 2205 关键词 移动开发, Hybrid混合开发 
分享到

第2页

自我介绍

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



第3页

QQ空间Hybrid架构

By Shinehuang(黄俊涛)



第5页

Native > H5:







第7页

Native > H5:

稳定



第9页

解决方案

离线包+预加载?



第10页

思考

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



第11页

传统H5加载流程



第12页

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



第13页

H5加载优化: http->socket



第14页

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



第15页

Html Cache



第16页

升级版etag

Etag sha1(htmlBuffer)

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



第17页

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



第19页

测速对比



第20页

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



第21页

Html页面结构



第22页

H5的增量更新



第23页

H5的增量更新



第24页

H5的增量更新

还可以做更多?



第25页

新的挑战

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



第26页

Html加载JS方法



第28页

H5离线操作



第29页

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



第31页

Native > H5:

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



第32页

React Native



第33页

React Native改造场景



第34页

React Native自定义组件



第35页

React Native自定义组件



第36页

React Native组件性能:<listview>

removeClippedSubviews



第37页

React Native组件性能:<listview>

内存无限制增长



第38页

React Native组件性能:<listview>

Android:RecyclerView



第39页

React Native组件性能:<listview>

手动回收



第40页

React Native组件性能:<listview>



第41页

React Native启动加速

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



第42页

React Native启动加速



第43页

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



第44页

React Native版本兼容性

Android4.1以下 Ios7以下



第46页

Web前端思考



第47页

THANK YOU

Any question?



支持文件格式:*.ppt, *.pptx, *.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。