Enviar pesquisa
Carregar
陈桂鸿 Ak--手机qq hybrid-app优化新思路
•
3 gostaram
•
745 visualizações
Y
yingganfei
Seguir
Hybrid
Leia menos
Leia mais
Engenharia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 43
Baixar agora
Baixar para ler offline
Recomendados
W3CTech美团react专场-React Native 初探
W3CTech美团react专场-React Native 初探
美团点评技术团队
W3CTech美团react专场-Thinking in React
W3CTech美团react专场-Thinking in React
美团点评技术团队
Funliday 新創生活甘苦談
Funliday 新創生活甘苦談
Mu Chun Wang
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术团队
快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规
yangdj
美团点评技术沙龙06 - 滴滴移动端测试解耦工具实践
美团点评技术沙龙06 - 滴滴移动端测试解耦工具实践
美团点评技术团队
China PHP Technology Summit 2011 ppt
China PHP Technology Summit 2011 ppt
Xinchen Hui
Beyond rails server
Beyond rails server
Michael Chen
Recomendados
W3CTech美团react专场-React Native 初探
W3CTech美团react专场-React Native 初探
美团点评技术团队
W3CTech美团react专场-Thinking in React
W3CTech美团react专场-Thinking in React
美团点评技术团队
Funliday 新創生活甘苦談
Funliday 新創生活甘苦談
Mu Chun Wang
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术沙龙13-酒旅Hybrid架构体系及演进
美团点评技术团队
快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规
yangdj
美团点评技术沙龙06 - 滴滴移动端测试解耦工具实践
美团点评技术沙龙06 - 滴滴移动端测试解耦工具实践
美团点评技术团队
China PHP Technology Summit 2011 ppt
China PHP Technology Summit 2011 ppt
Xinchen Hui
Beyond rails server
Beyond rails server
Michael Chen
美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术团队
Truck js 高性能移动web开发解决方案
Truck js 高性能移动web开发解决方案
美团技术团队
IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》
easychen
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
Mu Chun Wang
淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践
丁 宇
SITCON 2016 ─ Modern Front-End Workflow with Webpack
SITCON 2016 ─ Modern Front-End Workflow with Webpack
昱安 周
性能优化
性能优化
Lu Wei
Inline Script
Inline Script
blank zheng
Pegasus: Designing a Distributed Key Value System (Arch summit beijing-2016)
Pegasus: Designing a Distributed Key Value System (Arch summit beijing-2016)
涛 吴
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
Will Huang
Behind Pegasus, What matters in a Distributed System (Arch summit shenzhen_2017)
Behind Pegasus, What matters in a Distributed System (Arch summit shenzhen_2017)
涛 吴
淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化
丁 宇
React.js what do you really mean?
React.js what do you really mean?
昱安 周
轻量级Flash服务器开发框架(刘恒)
轻量级Flash服务器开发框架(刘恒)
FLASH开发者交流会
Nodejs & NAE
Nodejs & NAE
q3boy
大鱼架构演进
大鱼架构演进
Jun Liu
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
iflytek
美团前端架构简介
美团前端架构简介
pan weizeng
2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT
lhqunar
2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT
lhqunar
Weibo lamp improvements
Weibo lamp improvements
Xinchen Hui
写更好的CSS
写更好的CSS
Smallni Ding
Mais conteúdo relacionado
Mais procurados
美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术团队
Truck js 高性能移动web开发解决方案
Truck js 高性能移动web开发解决方案
美团技术团队
IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》
easychen
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
Mu Chun Wang
淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践
丁 宇
SITCON 2016 ─ Modern Front-End Workflow with Webpack
SITCON 2016 ─ Modern Front-End Workflow with Webpack
昱安 周
性能优化
性能优化
Lu Wei
Inline Script
Inline Script
blank zheng
Pegasus: Designing a Distributed Key Value System (Arch summit beijing-2016)
Pegasus: Designing a Distributed Key Value System (Arch summit beijing-2016)
涛 吴
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
Will Huang
Behind Pegasus, What matters in a Distributed System (Arch summit shenzhen_2017)
Behind Pegasus, What matters in a Distributed System (Arch summit shenzhen_2017)
涛 吴
淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化
丁 宇
React.js what do you really mean?
React.js what do you really mean?
昱安 周
Mais procurados
(13)
美团点评技术沙龙05 - 前后端联调方案探索与应用
美团点评技术沙龙05 - 前后端联调方案探索与应用
Truck js 高性能移动web开发解决方案
Truck js 高性能移动web开发解决方案
IDF2013大会分享——《使用新浪移动云开发全平台应用》
IDF2013大会分享——《使用新浪移动云开发全平台应用》
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
模糊也是一種美 - 從 BlurHash 探討前後端上傳圖片架構
淘宝网前台应用性能优化实践
淘宝网前台应用性能优化实践
SITCON 2016 ─ Modern Front-End Workflow with Webpack
SITCON 2016 ─ Modern Front-End Workflow with Webpack
性能优化
性能优化
Inline Script
Inline Script
Pegasus: Designing a Distributed Key Value System (Arch summit beijing-2016)
Pegasus: Designing a Distributed Key Value System (Arch summit beijing-2016)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
全新 Windows Server 2019 容器技術及邁向與 Kubernetes 整合之路 (Windows Server 高峰會)
Behind Pegasus, What matters in a Distributed System (Arch summit shenzhen_2017)
Behind Pegasus, What matters in a Distributed System (Arch summit shenzhen_2017)
淘宝前台系统性能分析与优化
淘宝前台系统性能分析与优化
React.js what do you really mean?
React.js what do you really mean?
Semelhante a 陈桂鸿 Ak--手机qq hybrid-app优化新思路
轻量级Flash服务器开发框架(刘恒)
轻量级Flash服务器开发框架(刘恒)
FLASH开发者交流会
Nodejs & NAE
Nodejs & NAE
q3boy
大鱼架构演进
大鱼架构演进
Jun Liu
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
iflytek
美团前端架构简介
美团前端架构简介
pan weizeng
2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT
lhqunar
2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT
lhqunar
Weibo lamp improvements
Weibo lamp improvements
Xinchen Hui
写更好的CSS
写更好的CSS
Smallni Ding
Top100summit automan x之框架介绍 王超
Top100summit automan x之框架介绍 王超
drewz lin
2012 淘宝D2技术沙龙
2012 淘宝D2技术沙龙
lhqunar
03 -黄朝兴--腾讯游戏
03 -黄朝兴--腾讯游戏
勇浩 赖
20110821 Web Development on Cloud Platform - PIXNET
20110821 Web Development on Cloud Platform - PIXNET
Jui-Nan Lin
HTML5 实战 WebApp 阅读应用– Shiu
HTML5 实战 WebApp 阅读应用– Shiu
Jingchao Di
Responsive Web UI Design
Responsive Web UI Design
jay li
Honey's Data Dinner#7 webpack 包達人(入門)
Honey's Data Dinner#7 webpack 包達人(入門)
beehivedata
Web图片优化
Web图片优化
明 李
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
Scourgen Hong
Berserk js
Berserk js
taobao.com
Gentek应用介绍20111123
Gentek应用介绍20111123
oemgame
Semelhante a 陈桂鸿 Ak--手机qq hybrid-app优化新思路
(20)
轻量级Flash服务器开发框架(刘恒)
轻量级Flash服务器开发框架(刘恒)
Nodejs & NAE
Nodejs & NAE
大鱼架构演进
大鱼架构演进
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
Web端交互逻辑抽象的实践—运营h5页面和逻辑自动生成利器
美团前端架构简介
美团前端架构简介
2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT
Weibo lamp improvements
Weibo lamp improvements
写更好的CSS
写更好的CSS
Top100summit automan x之框架介绍 王超
Top100summit automan x之框架介绍 王超
2012 淘宝D2技术沙龙
2012 淘宝D2技术沙龙
03 -黄朝兴--腾讯游戏
03 -黄朝兴--腾讯游戏
20110821 Web Development on Cloud Platform - PIXNET
20110821 Web Development on Cloud Platform - PIXNET
HTML5 实战 WebApp 阅读应用– Shiu
HTML5 实战 WebApp 阅读应用– Shiu
Responsive Web UI Design
Responsive Web UI Design
Honey's Data Dinner#7 webpack 包達人(入門)
Honey's Data Dinner#7 webpack 包達人(入門)
Web图片优化
Web图片优化
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
从林书豪到全明星 - 虎扑网技术架构如何化解流量高峰
Berserk js
Berserk js
Gentek应用介绍20111123
Gentek应用介绍20111123
陈桂鸿 Ak--手机qq hybrid-app优化新思路
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
10.
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 版本控制策略
Baixar agora