《陈桂鸿-AK--手机QQHybridApp优化新思路.pdf》由会员分享，可在线阅读，更多相关《陈桂鸿-AK--手机QQHybridApp优化新思路.pdf（39页珍藏版）》请在三一文库上搜索。
1、 手机手机 QQQQ HybridHybrid AppApp 优化新思路?优化新思路? 腾讯 AlloyTeam 高级工程师 - 陈桂鸿? 2014-10-10? AKAK （AlloyKit（AlloyKit）? QCon 上海 2014? 个人个人简介介 AboutAbout Me Me n 个人信息 个人信息 n 陈桂鸿，腾讯 AlloyTeam n 2010 年加入腾讯 n WebQQ、群空间、互联开发平台、Q+、QQ、手机QQ n 博客：http:/ n 工作方向 工作方向 n Web + Client Hybrid 模式探索 n WebApp、H5 探索 n Alloyteam 开
2、源项目、腾讯开源 n 推动团队开发流程优化 n 前端构建发布平台 主要内容 主要内容 n Web / Client 选型 n 移动时代 Hybrid Web 困境 n 问题到此为止，AK（AlloyKit） 产生与架构 n WebView 内核初始化提速 n 基于 URL 路由的前端静态资源离线机制 n 动态 cgi 数据拉取优化方案 n Web 规范，UI Kit Pro n Web 能力增强，JS Api n AK 其他模块 n 多端融合思考 Web?Web? Client?Client? 更快的迭代? 更高开发效率? 更好的性能? 更高级的 api 能力? Hybrid?Hybrid?
3、硬件性能提升?Web 迭代能力 ? 客户端高级能力? v 渲染性能? v 加载性能? 移移动时代代 HybridHybrid WebWeb 困境 困境 n 打开慢打开慢、 、打不开 打不开 n 移动网络不稳定，加载时间长 n 一直在菊花一直在菊花、 、到到处是菊花 是菊花 n cgi 加载耗时、成功率 n 性能差性能差、 、卡 卡 n 局部滚动、图片展示 n 体体验差差， ，有些功能有些功能 WebWeb 做不了做不了 n 无法使用系统级 api，组件，多选图片 n 调试不方便不方便 n pc 调试 AK?AK? 关于关于 AK AK AK AK Alloy+Kit? AlloyTeam?Al
4、loyTeam? 多端? 合金? Web? Mobile? Client? Server? 开发套件? 解决方案? 高性能高性能 Hybrid Web 开发框架开发框架 Webview? 体验? AKAK 用用户与数据 与数据 200+200+ AppApp ? 5 5 BGBG ? 9 9 D D ? 100+100+ JSApiJSApi ? 19+亿/天19+亿/天 ? 10+亿/天10+亿/天 ? AKAK 架构体系 架构体系 打开慢打开慢、 、打不开打不开、 、菊花菊花？ n 耗耗时分析 分析 n Webview 内核初始化耗时 n 前端 Web 资源加载耗时 n 动态 cgi 加载
5、耗时 缩短白屏短白屏， ，消消灭菊花 菊花 n WebviewWebview 内内核初始化提速 核初始化提速 n pc：180ms，ios：50ms n android：4s 手Q手Q androidandroid 4 4. .7 7. .2? 2? 缩短白屏短白屏， ，消消灭菊花 菊花 n WebWeb 前端加前端加载耗耗时？ n 性能优化 n 还能做什么 n 缓存，第一次怎么办？ n H5 离线？ 进击的Hybrid App，量身定做缓存机制 AKAK 的离的离线机制 机制 n 特征 n zip offline n 基于 URL 路由替换 n 多种离线更新方式 n 可随客户端打包 n 传输
6、优化 n zip 压缩传输、增量 n 可断点、重试 n 前端透明 n 接入方便 n 灵活选择离线文件 n 机制灵活可控 n 废弃、过期 n 安全校验 n md5 防篡改 AKAK 的离的离线机制 机制 AKAK 的离的离线机制 机制 n 完善的离完善的离线包更新机制 包更新机制 n 资源打包到客户端 n Web App 启动 n 手Q 登录 & 启动 n 实时 push n 实时 Push Push n 全员 n 耗资源 n 使用率 n 分号段 n 分时 AKAK 的离的离线机制 机制 n 更更优的的资源下源下载策略 策略 n 检查更新 http cgi - sso socket n 成功率
7、98.5% - 99.94% n 下载引擎优化 n 断点续传 n 分块下载 n 重试逻辑 AKAK 的离的离线机制 机制 n 更更优的的资源更新策略源更新策略 - - 增量更新 增量更新 n 基于压缩包增量文件列表 MD5MD5 比对?比对? Webapp-v3_1Webapp-v3_1 覆盖覆盖? AKAK 的离的离线机制 机制 n 更更优的的资源更新策略源更新策略 - - 增量更新 增量更新 n 基于二进制差量算法 bsdiff Chromium Courgette Webapp-v3_1Webapp-v3_1 bspatch?bspatch? bsdiff?bsdiff? AKAK 的离
8、的离线机制 机制 n 影响影响 bsdiffbsdiff 效果的因素 效果的因素 n zip 包压缩模式：标准压缩、仅打包 n zip 包文件修改时间，打包顺序（减少额外信息） n zip 包文件内容 n js 进行 uglify 压缩，变量名可能引起大幅变更 增量包大小减少增量包大小减少 80%+?80%+? AKAK 的离的离线机制 机制 n 离离线文件安全 文件安全 n verify.json (文件 md5列表) n verify.signature MD5MD5 + + 非非对称加密 称加密 AKAK 的离的离线机制 机制 n 更更优的的资源源调度度 - - 控制中心控制中心 AKA
9、K CCenter CCenter n 过期机制 n 预下载 n 批量更新 n 断点续传 n 重试逻辑 离离线化的价化的价值 手Q吃喝玩乐首页?手Q吃喝玩乐首页? 数据来源：? 离离线包机制 包机制 手Q群成员列表页面?手Q群成员列表页面? 数据来源：? 动态数据拉取数据拉取优化方案 化方案 n 静态资源 100ms 1s n 动态数据，cgi 数据，定位信息等， 4s 6s n AJAX & 直出？ n 内容 & 客户端环境 n 离线机制 动态数据拉取数据拉取优化方案 化方案 n 模模拟客客户端弱网端弱网络、 、无网无网络下体下体验 n localStoagelocalStoage & &
10、手Q手Q JSJS ApiApi （20M（20M） ） n 数据数据缓存存层解决方案 解决方案 n 优先使用 localStorage 数据 命名空间命名空间、有效期有效期、版版本本、容错容错、默认数据默认数据、重要性重要性、重写重写 ClearClear ? 动态数据拉取数据拉取优化方案 化方案 n 提升提升缓存命中率 存命中率 n cgi url + param，key/value 存储？ n default data，适应性问题？ n 关系 + 数据元素 30-40 命中率命中率？ 提升数据提升数据缓存命中率 存命中率 优化前优化前：只有重复打开的页面才能命中缓存，首次打开详情页本地无
11、缓存? 优化后优化后：首次打开详情页也能命中缓存，一般有 30% 的用户会进入详情页? 思路思路：命中率命中率、允许数据冗余允许数据冗余、数据一致性数据一致性 ? 命中率命中率：90%+?90%+? 动态数据数据优化价化价值 手Q群成员列表页面?手Q群成员列表页面? 动态数据拉取数据拉取优化方案 化方案 n 基于基于 SSOSSO RequestRequest 的数据的数据协议优化 化 n ajax http n 防止恶意提交 n ip、限频、脏词、贝叶斯模型 n 验证码 n 手Q 通讯通道 SSO n 基于 socket n 更稳定、更高效 n 更安全 n 开开发支持 支持 回回顾 打开慢打
12、开慢、 、打不开打不开、 、菊花菊花？ n 内核启内核启动优化 化 n Webview 热启动 n 静静态资源 源 n 离线化 n 动态数据 数据 n 基于 localStorage 缓存 n 利用数据关系提升命中率 n 利用 SSO Request 提升效率 & 安全性 AKAK 性能差性能差、 、卡 卡 n 性能性能优化最佳化最佳实践 践 n WebWeb 交互模型抽象 交互模型抽象 n UIKitUIKit - - ProPro UIUI 库 体体验差差 - - JSJS ApiApi 增增强强 n 补齐系系统能力 能力 n 获取多张图片、呼起聊天窗、小红点消息通知. n h5h5 ap
13、iapi 兼容 兼容 n 地址位置 android、本地音视频播放 n 更高效原生更高效原生组件件 & & iosios lualua 客客户端插件 端插件 n 图片查看器、城市选择器、列表选择器 n WebviewWebview 能力能力扩展 展 n data 20M（localStorage） n Webview event （postMessage） n Webview 导航、控制 n SSO Request 开开发调试 n 模模拟调试 n 远程程调试 n webkit / werein / jsconsole / livereload / browersync n 调试工具 工具 n
14、mobug AKAK 其他其他辅助模助模块 n 权权限校限校验 n 登录态管理 n 自动种入登录态 n 自动续期 n JS Api 授权 n DNSDNS 管理 管理 n ip 有效性检验 n 尝试使用 ip 访问 n 数据上数据上报 n 关键点自动上报 n 上报 api 多端融合 多端融合 n 多端多端团队 n 跨端技跨端技术堆堆栈 n 团队协作 作 n 版本化思版本化思维 n 前端文件版本化 n 数据接口版本化 n 版本控制策略 更多更多资源参考 源参考 n AlloyTeamAlloyTeam 博客博客： ：httphttp: :/www/www. .alloyteamalloyteam
15、. .com com n 团队 githubgithub： ：httphttp: :/github/github. .com/alloyteam com/alloyteam n ProPro: : httpshttps: :/github/github. .com/AlloyTeam/Pro com/AlloyTeam/Pro n SpiritSpirit： ：httpshttps: :/github/github. .com/AlloyTeam/Spiritcom/AlloyTeam/Spirit n AlloyTeamAlloyTeam 开源开源： ：httpshttps: :/alloyteam/alloyteam. .githubgithub. .io io 使用技术改变世界使用技术改变世界，成为业界卓越团队?成为业界卓越团队? AlloyTeam ? THANKSTHANKS ? QCon 上海 2014? AlloyTeam 招聘邮箱：