陈桂鸿 ak--手机qq hybrid-app优化新思路
TRANSCRIPT
![Page 1: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/1.jpg)
Native App、Hybrid App和Web APP移动开发,谁主未来
![Page 2: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/2.jpg)
• 开发速度快• 推⼲⼴广成本低• 发版优势• 定制性⾼高• 开放
• 性能⾼高• 开销可控• 动画流畅
• 系统API
Native
Web开发成本高、速度慢更新成本很大
开发成本低
![Page 3: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/3.jpg)
http://www.developereconomics.com/downloads/can-html5-compete-native/
多少Native app可以⽤用web技术实现
37%
HTML5 Phonegap
49%
Appcelerator
63%
30,339 Apps
![Page 4: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/4.jpg)
Why not HTML5Why not HTML5Why not HTML5
http://www.developereconomics.com/downloads/can-html5-compete-native/
APIs 37%
与Native交互29%
性能46%
Why not
HTML5
![Page 5: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/5.jpg)
87.5%转场、动画问题
调研百度移动站点
•元素固定位置•图⽚片或tab slider•弹出层•加载更多•⽆无限下拉
![Page 6: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/6.jpg)
37%HTML5
400+ Android App (国内,⾮非游戏、⼯工具)
滑图浏览
软键盘控制
离线能⼒力
可滑动的容器
多级菜单
卡头效果
可滑动的tab
刮奖
短信能⼒力在线IM
摇⼀一摇
元素固定位置
弹出层
⽆无限滚屏
下拉刷新分享
88%最终
![Page 7: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/7.jpg)
能⼒力
离线能⼒力输⼊入调起键盘
设备状态、系统控制多媒体处理⽂文件系统跨应⽤用调⽤用
容器
可滑动的容器可滑动的Tab
卡头效果下拉刷新⽆无限滚屏
组件
分享弹出层划图浏览
IM
多级菜单刮奖摇⼀一摇
400+ Android App (国内,⾮非游戏、⼯工具)
![Page 8: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/8.jpg)
http://www.tmtpost.com/159615.html https://careers.microsoft.com/jobdetails.aspx?ss=&pg=0&so=&rw=2&jid=160633&jlang=EN&pp=SS
![Page 9: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/9.jpg)
• 内容呈现• 时效性功能• 需快速迭代部分• 开放给第三⽅方• 运⾏行容器
• 基础API• 系统核⼼心能⼒力• 复杂或重要交互
Native
Web
![Page 10: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/10.jpg)
![Page 11: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/11.jpg)
• Native代码针对关键问题,代码规模⼩小,可控
• 转场、动画、重点组件由Native完成
• 释放web的灵活性到Native中
• 单个webview变⼩小,局部性能可控
![Page 12: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/12.jpg)
加速⼿手段• DOM:极⼤大缩减DOM体积,复⽤用webview减少重绘
• Javascript: 避免⼤大量DOM Event监听
• 动画:Android View 代替 CSS3
• ⺴⽹网络:资源离线;webview预加载、预渲染
• 复杂控件:嵌⼊入Native控件
• 内核:T5浏览器
FPS
从 30~40 到
55~60
![Page 13: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/13.jpg)
性能(⾸首要⺫⽬目标)
原⽣生动画与控件缩减DOM
可离线T5内核
灵活性(带来⽆无限可能)
随时更新动态扩展低耦合⽆无限定制
能⼒力
设备API
系统能⼒力封装webview控制⼒力云能⼒力
Web
⼀一份代码随处运⾏行
Web for all
Hybrid
![Page 14: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/14.jpg)
主要内容
n 移动时代 Hybrid Web 困境
n 问题到此为止,AK(AlloyKit) 产生与架构
n WebView 内核初始化提速n 基于 URL 路由的前端静态资源离线机制n 动态 cgi 数据拉取优化方案n Web 规范,UI Kit Pron Web 能力增强,JS Api
n 多端融合思考
![Page 15: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/15.jpg)
Hybrid硬件性能提升 Web 迭代能力 客户端高级能力
v 渲染性能
v 加载性能
![Page 16: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/16.jpg)
移动时代 Hybrid Web 困境
n 打开慢、打不开 n 移动网络不稳定,加载时间⻓长
n 一直在菊花、到处是菊花 n cgi 加载耗时、成功率
n 性能差、卡 n 局部滚动、图片展示
n 体验差,有些功能 Web 做不了 n 无法使用系统级 api,组件,多选图片
n 调试不方便 n pc 调试
AK
![Page 17: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/17.jpg)
关于 AK
AK Alloy+Kit
AlloyTeam
多端合金
Web
Mobile
ClientServer
开发套件
解决方案
高性能 Hybrid Web 开发框架
Webview
体验
![Page 18: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/18.jpg)
AK 用户与数据
200+ App5 BG 9 D
100+ JSApi 19+亿/天
10+亿/天
![Page 19: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/19.jpg)
AK 架构体系
![Page 20: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/20.jpg)
打开慢、打不开、菊花?
n 耗时分析
n Webview 内核初始化耗时 n 前端 Web 资源加载耗时 n 动态 cgi 加载耗时
![Page 21: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/21.jpg)
缩短白屏,消灭菊花
n Webview 内核初始化提速
n pc:180ms,ios:50ms n android:4s
手Q android 4.7.2
![Page 22: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/22.jpg)
缩短白屏,消灭菊花
n Web 前端加载耗时? n 性能优化 n 还能做什么
n 缓存,第一次怎么办? n H5 离线? 《进击的Hybrid App,量身定做缓存机制》
![Page 23: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/23.jpg)
AK 的离线机制
n 特征
n zip offline n 基于 URL 路由替换
n 多种离线更新方式
n 可随客户端打包
n 传输优化
n zip 压缩传输、增量 n 可断点、重试
n 前端透明 n 接入方便 n 灵活选择离线文件
n 机制灵活可控 n 废弃、过期
n 安全校验 n md5 防篡改
![Page 24: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/24.jpg)
AK 的离线机制
![Page 25: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/25.jpg)
AK 的离线机制
n 完善的离线包更新机制
n 资源打包到客户端 n Web App 启动 n 手Q 登录 & 启动 n 实时 push
n 实时 Push
n 全员 n 耗资源 n 使用率 n 分号段 n 分时
![Page 26: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/26.jpg)
AK 的离线机制
n 更优的资源下载策略
n 检查更新 http cgi -> sso socket n 成功率 98.5% -> 99.94%
n 下载引擎优化 n 断点续传 n 分块下载 n 重试逻辑
![Page 27: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/27.jpg)
AK 的离线机制
n 更优的资源更新策略 - 增量更新
n 基于压缩包增量文件列表
MD5 比对
Webapp-v3_1 覆盖
![Page 28: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/28.jpg)
AK 的离线机制
n 更优的资源更新策略 - 增量更新
n 基于二进制差量算法 bsdiff Chromium Courgette
Webapp-v3_1
bspatch
bsdiff
![Page 29: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/29.jpg)
AK 的离线机制
n 影响 bsdiff 效果的因素
n zip 包压缩模式:标准压缩、仅打包 n zip 包文件修改时间,打包顺序(减少额外信息) n zip 包文件内容
n js 进行 uglify 压缩,变量名可能引起大幅变更
增量包大小减少 80%+
![Page 30: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/30.jpg)
AK 的离线机制
n 离线文件安全
n verify.json (文件 md5列表) n verify.signature MD5 + 非对称加密
![Page 31: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/31.jpg)
AK 的离线机制
n 更优的资源调度 - 控制中心 AK CCenter n 过期机制 n 预下载 n 批量更新 n 断点续传 n 重试逻辑
![Page 32: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/32.jpg)
离线化的价值
手Q吃喝玩乐首页数据来源:habo.oa.com
![Page 33: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/33.jpg)
离线包机制
手Q群成员列表页面数据来源:habo.oa.com
![Page 34: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/34.jpg)
动态数据拉取优化方案
n 静态资源 100ms ~ 1s
n 动态数据,cgi 数据,定位信息等, 4s ~ 6s
n AJAX & 直出?
n 内容 & 客户端环境 n 离线机制
![Page 35: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/35.jpg)
动态数据拉取优化方案
n 模拟客户端弱网络、无网络下体验
n localStoage & 手Q JS Api (20M)
n 数据缓存层解决方案
n 优先使用 localStorage 数据
命名空间、有效期、版本、容错、默认数据、重要性、重写 Clear
![Page 36: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/36.jpg)
动态数据拉取优化方案
n 提升缓存命中率
n cgi url + param,key/value 存储? n default data,适应性问题? n 关系 + 数据元素
30-40 命中率?
![Page 37: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/37.jpg)
提升数据缓存命中率
优化前:只有重复打开的页面才能命中缓存,首次打开详情页本地无缓存
优化后:首次打开详情页也能命中缓存,一般有 30% 的用户会进入详情页
思路:命中率、允许数据冗余、数据一致性 命中率:90%+
![Page 38: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/38.jpg)
动态数据优化价值
手Q群成员列表页面
![Page 39: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/39.jpg)
动态数据拉取优化方案
n 基于 SSO Request 的数据协议优化
n ajax http n 防止恶意提交
n ip、限频、脏词n 验证码
n 手Q 通讯通道 SSOn 基于 socketn 更稳定、更高效n 更安全
n 开发支持
![Page 40: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/40.jpg)
回顾
打开慢、打不开、菊花?
n 内核启动优化
n Webview 热启动
n 静态资源
n 离线化
n 动态数据
n 基于 localStorage 缓存 n 利用数据关系提升命中率 n 利用 SSO Request 提升效率 & 安全性
AK
![Page 41: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/41.jpg)
体验差 - JS Api 增强
n 补⻬齐系统能力
n 获取多张图片、呼起聊天窗、小红点消息通知...
n h5 api 兼容
n 地址位置 android、本地音视频播放
n 更高效原生组件 & ios lua 客户端插件
n 图片查看器、城市选择器、列表选择器
n Webview 能力扩展
n data 20M(localStorage)n Webview 导航、控制n SSO Request
![Page 42: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/42.jpg)
开发调试
![Page 43: 陈桂鸿 Ak--手机qq hybrid-app优化新思路](https://reader031.vdocuments.net/reader031/viewer/2022012311/55a46f9e1a28ab9f388b45bd/html5/thumbnails/43.jpg)
多端融合
n 多端团队
n 跨端技术堆栈
n 团队协作
n 版本化思维
n 前端文件版本化n 数据接口版本化n 版本控制策略