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