Hybrid

1. Native App、Hybrid App和Web APP
移动开发，谁主未来

2. • 开发速度快
• 推⼲⼴广成本低
• 发版优势
• 定制性⾼高
• 开放
Native
• 性能⾼高
• 开销可控
• 动画流畅
• 系统API
Web
开发成本高、速度慢
更新成本很大
开发成本低

3. 多少Native app可以⽤用web技术实现
63%
http://www.developereconomics.com/downloads/can-html5-compete-native/
37%
49%
HTML5 Phonegap
Appcelerator
30,339 Apps

4. Why not
HTML5
与Native交互
29%
APIs
37%
http://www.developereconomics.com/downloads/can-html5-compete-native/
性能
46%
Why
not
HTML5

5. 87.5%
转场、动画问题
• 元素固定位置
• 图⽚片或tab slider
• 弹出层
• 加载更多
• ⽆无限下拉
调研百度移动站点

6. 37%
HTML5
滑图浏览
可滑动的容器
元素固定位置
软键盘控制
88%
最终
可滑动的tab
卡头效果
400+ Android App
（国内，⾮非游戏、⼯工具）
离线能⼒力
多级菜单
刮奖
在线IM 短信能⼒力
摇⼀一摇
弹出层
⽆无限滚屏
分享下拉刷新

7. 能⼒力
离线能⼒力
输⼊入调起键盘
设备状态、系统控制
多媒体处理
⽂文件系统
跨应⽤用调⽤用
容器
可滑动的容器
可滑动的Tab
卡头效果
下拉刷新
⽆无限滚屏
组件
分享
弹出层
划图浏览
IM
多级菜单
刮奖
摇⼀一摇
400+ Android App
（国内，⾮非游戏、⼯工具）

8. http://www.tmtpost.com/159615.html
https://careers.microsoft.com/jobdetails.aspx?ss=pg=0so=rw=2jid=160633jlang=ENpp=SS

9. Native
• 内容呈现
• 时效性功能
• 需快速迭代部分
• • 运⾏行容器开放给第三⽅方
• 基础API
• 系统核⼼心能⼒力
• 复杂或重要交互
Web

11. • Native代码针对关键问题，代码规模⼩小，可控
• 转场、动画、重点组件由Native完成
• 释放web的灵活性到Native中
• 单个webview变⼩小，局部性能可控

12. 加速⼿手段
• DOM：极⼤大缩减DOM体积，复⽤用webview减少重绘
• Javascript： 避免⼤大量DOM Event监听
• 动画：Android View 代替 CSS3
• ⺴⽹网络：资源离线；webview预加载、预渲染
• 复杂控件：嵌⼊入Native控件
• 内核：T5浏览器
FPS
从 30~40 到
55~60

13. 性能
(⾸首要⺫⽬目标)
原⽣生动画与控件
缩减DOM
可离线
T5内核
灵活性
(带来⽆无限可能)
随时更新
动态扩展
低耦合
⽆无限定制
能⼒力
设备API
系统能⼒力封装
webview控制⼒力
云能⼒力
Web
⼀一份代码
随处运⾏行
Web for all
Hybrid

14. ୺せෆᐜ
n 㻌⛣动时௦㻌㻴㼥㼎㼞㼕㼐㻌㼃㼑㼎㻌ᅔቃ
n 㻌问题฿Ṉ为Ṇ䠈㻭㻷䠄㻭㼘㼘㼛㼥㻷㼕㼠䠅㻌产⏕୚ᯫᯊ
n WebView 内核初始化提速
n 基于 URL 路由的前端静态资源离线机制
n 动态 cgi 数据拉取优化方案
n Web 规范，UI Kit Pro
n Web 能力增强，JS Api
n 㻌ከ➃⼥ྜᛮ⪃

15. Hybrid
硬件性能提升Web 迭代能力客户端高级能力
v 渲染性能
v 加载性能

16. ⛣动时௦㻌㻴㼥㼎㼞㼕㼐㻌㼃㼑㼎㻌ᅔቃ
n 㻌ᡴᘙ៏䚸ᡴ୙ᘙ
n 移动网络不稳定，加载时间⻓长
n 㻌୍┤ᅾ⳥ⰼ䚸฿处᫝⳥ⰼ
n cgi 加载耗时、成功率
n 㻌ᛶ⬟ᕪ䚸༩
n 局部滚动、图片展示
n 㻌య验ᕪ䠈᭷லຌ⬟㻌㼃㼑㼎㻌೴୙஢㻌
n 无法使用系统级 api，组件，多选图片
n 㻌调试୙᪉౽㻌
n pc 调试
AK

17. යன㻌㻭㻷
㻭㻷 Alloy+Kit
AlloyTeam
多端
合金
Web
Mobile
Client
Server
开发套件
解决方案
高性能 Hybrid Web 开发框架
Webview
体验

18. 㻭㻷㻌⏝户୚ᩘᤣ
200+ App5 BG9 D
100+ JSApi19+亿/天
10+亿/天

19. 㻭㻷㻌ᯫᯊయ⣔

20. ᡴᘙ៏䚸ᡴ୙ᘙ䚸⳥ⰼ䠛
n 㻌⪖时ศᯒ
n Webview 内核初始化耗时
n 前端 Web 资源加载耗时
n 动态 cgi 加载耗时

21. 缩▷ⓑᒊ䠈ᾘ灭⳥ⰼ
n 㻌㻌㼃㼑㼎㼢㼕㼑㼣㻌ෆ᰾ึጞ໬ᥦ㏿
n pc：180ms，ios：50ms
n android：4s
手Q android 4.7.2

22. 缩▷ⓑᒊ䠈ᾘ灭⳥ⰼ
n 㻌㼃㼑㼎㻌๓➃ຍ载⪖时䠛
n 性能优化
n 还能做什么
n 缓存，第一次怎么办？
n H5 离线？ 《进击的Hybrid App，量身定做缓存机制》

23. 㻭㻷㻌ⓗ⚹线ᮘไ
n ≉ᚁ
n zip offline
n 基于 URL 路由替换
n ከ⛇⚹线᭦᪂᪉ᘧ
n 可随客户端打包
n 㻌传输优໬
n zip 压缩传输、增量
n 可断点、重试
n 㻌๓➃㏱᫂
n 接入方便
n 灵活选择离线文件
n 㻌ᮘไ⅋άྍ᥍
n 废弃、过期
n 㻌Ᏻ඲ᰯ验
n md5 防篡改

24. 㻭㻷㻌ⓗ⚹线ᮘไ

25. 㻭㻷㻌ⓗ⚹线ᮘไ
n 㻌᏶ၿⓗ⚹线ໟ᭦᪂ᮘไ
n 资源打包到客户端
n Web App 启动
n 手Q 登录 启动
n 实时 push
n 㻌实时㻌㻼㼡㼟㼔
n 全员
n 耗资源
n 使用率
n 分号段
n 分时

26. 㻭㻷㻌ⓗ⚹线ᮘไ
n 㻌᭦优ⓗ资※ୗ载⟇␎
n 检查更新 http cgi - sso socket
n 成功率 98.5% - 99.94%
n 下载引擎优化
n 断点续传
n 分块下载
n 重试逻辑

27. 㻭㻷㻌ⓗ⚹线ᮘไ
n 㻌᭦优ⓗ资※᭦᪂⟇␎㻌㻙㻌ቔ㔞᭦᪂
n 基于压缩包增量文件列表
MD5 比对
Webapp-v3_1 覆盖

28. 㻭㻷㻌ⓗ⚹线ᮘไ
n 㻌᭦优ⓗ资※᭦᪂⟇␎㻌㻙㻌ቔ㔞᭦᪂
n 基于二进制差量算法 bsdiff Chromium Courgette
Webapp-v3_1
bspatch
bsdiff

29. 㻭㻷㻌ⓗ⚹线ᮘไ
n 㻌ᙳဤ㻌㼎㼟㼐㼕㼒㼒㻌ᩀᯝⓗᅉ⣲
n zip 包压缩模式：标准压缩、仅打包
n zip 包文件修改时间，打包顺序（减少额外信息）
n zip 包文件内容
n js 进行 uglify 压缩，变量名可能引起大幅变更
增量包大小减少 80%+

30. 㻭㻷㻌ⓗ⚹线ᮘไ
n 㻌⚹线ᩥ௳Ᏻ඲
n verify.json (文件 md5列表)
n verify.signature 㻹㻰㻡㻌㻗㻌㠀对⛠ຍᐦ

31. 㻭㻷㻌ⓗ⚹线ᮘไ
n 㻌᭦优ⓗ资※调ᗘ㻌㻙㻌᥍ไ୰ᚰ㻌㻭㻷㻌㻯㻯㼑㼚㼠㼑㼞
n 过期机制
n 预下载
n 批量更新
n 断点续传
n 重试逻辑

32. ⚹线໬ⓗ௴值
手Q吃喝玩乐首页数据来源：habo.oa.com

33. ⚹线ໟᮘไ
手Q群成员列表页面数据来源：habo.oa.com

34. 动态ᩘᤣᢼྲྀ优໬᪉᱌
n 㻌㟼态资※㻌㻝㻜㻜㼙㼟㻌㼪㻌㻝㼟
n 㻌动态ᩘᤣ䠈㼏㼓㼕㻌ᩘᤣ䠈ᐃ఩ಙᜥ➼䠈㻌㻠㼟㻌㼪㻌㻢㼟
n 㻌㻭㻶㻭㼄㻌㻒㻌┤ฟ䠛
n 内容 客户端环境
n 离线机制

35. 动态ᩘᤣᢼྲྀ优໬᪉᱌
n 㻌ᶍ拟ᐈ户➃ᙅ⨒络䚸᪢⨒络ୗయ验
n 㻌㼘㼛㼏㼍㼘㻿㼠㼛㼍㼓㼑㻌㻒㻌ᡭ㻽㻌㻶㻿㻌㻭㼜㼕㻌䠄㻞㻜㻹䠅
n 㻌ᩘᤣ缓Ꮡ层ゎ෩᪉᱌
n 优先使用 localStorage 数据
命名空间、有效期、版本、容错、默认数据、重要性、重写 Clear

36. 动态ᩘᤣᢼྲྀ优໬᪉᱌
n 㻌ᥦ༖缓Ꮡ࿨୰⋡
n cgi url + param，key/value 存储？
n default data，适应性问题？
n 关系 + 数据元素
30-40 ࿨୰⋡䠛

37. ᥦ༖ᩘᤣ缓Ꮡ࿨୰⋡
优化前：只有重复打开的页面才能命中缓存，首次打开详情页本地无缓存
优化后：首次打开详情页也能命中缓存，一般有 30% 的用户会进入详情页
思路：命中率、允许数据冗余、数据一致性 命中率：90%+

38. 动态ᩘᤣ优໬௴值
手Q群成员列表页面

39. 动态ᩘᤣᢼྲྀ优໬᪉᱌
n 㻌ᇶன㻌㻿㻿㻻㻌㻾㼑㼝㼡㼑㼟㼠㻌ⓗᩘᤣ协议优໬
n ajax http
n 防止恶意提交
n ip、限频、脏词
n 验证码
n 手Q 通讯通道 SSO
n 基于 socket
n 更稳定、更高效
n 更安全
n 㻌ᘙ发ᨭᣢ

40. ᅇ顾
ᡴᘙ៏䚸ᡴ୙ᘙ䚸⳥ⰼ䠛
n ෆ᰾ྐྵ动优໬
n Webview 热启动
n 㟼态资※
n 离线化
n 㻌动态ᩘᤣ
n 基于 localStorage 缓存
n 利用数据关系提升命中率
n 利用 SSO Request 提升效率 安全性
㻭㻷

41. య验ᕪ㻌㻙㻌㻶㻿㻌㻭㼜㼕㻌ቔ强
n 㻌补⻬齐⣔统⬟ຊ
n 获取多张图片、呼起聊天窗、小红点消息通知...
n 㻌㼔㻡㻌㼍㼜㼕㻌වᐜ
n 地址位置 android、本地音视频播放
n 㻌᭦㧗ᩀཎ⏕组௳㻌㻒㻌㻌㼕㼛㼟㻌㼘㼡㼍㻌ᐈ户➃ᥨ௳
n 图片查看器、城市选择器、列表选择器
n 㻌㼃㼑㼎㼢㼕㼑㼣㻌⬟ຊ扩ᒎ
n data 20M（localStorage）
n Webview 导航、控制
n SSO Request

42. ᘙ发调试

43. ከ➃⼥ྜ
n 㻌ከ➃团队
n 㻌㊬➃ᢏ术ሁ栈
n 㻌团队协స
n 㻌∧ᮏ໬ᛮ维
n 前端文件版本化
n 数据接口版本化
n 版本控制策略