AirJD 焦点
AirJD

没有录音文件
00:00/00:00
加收藏

移动App性能优化经验分享 by 储诚栋@携程

发布者 weber
发布于 1433837321879  浏览 5441 关键词 架构, 移动开发 
分享到

第1页

移动App性能优化经验分享

携程旅⾏行⺴⽹网 研发总监 储诚栋



第2页

移动App / Web

• App • Native • Hybrid • H5直连

• Web • H5 • SEO



第3页

DNS 优化

• Dns 解析慢 - App Dns 预解析 + 合理的 TTL • Dns 解析错误、被拦截 - 内置可⽤用IP



第4页

CDN优化



第5页

CDN优化 - ⾃自动压缩合并



第6页

CDN优化 - 动静分离



第7页

海外CDN - DNS

2500.0#

2000.0#

1500.0#

1000.0#

500.0#

0.0# _dns _dns



第8页

海外CDN - Connect



400.0# 350.0# 300.0# 250.0# 200.0# 150.0# 100.0#

50.0# 0.0#



_connect



_connect



第9页

海外CDN - Request



900.0# 800.0# 700.0# 600.0# 500.0# 400.0# 300.0# 200.0# 100.0#

0.0#



_request



_request



第10页

海外CDN - Response

1400.0#



1200.0#



1000.0#



800.0#



600.0#



400.0#



200.0#



0.0#



_response



_response



第11页

CDN - 质量监控(国内)



第12页

CDN - 质量监控(海外)



第13页

Payload 优化 - ⺴⽹网络带宽



第14页

Payload 优化 - ⺴⽹网络带宽



第15页

Payload 优化 - ⺴⽹网络带宽



第16页

Payload 优化 - ⺴⽹网络带宽

• 为不同⺴⽹网络准备不同分辨率的图⽚片 • 上⾏行带宽远⼩小于下⾏行带宽

• App - 合理设置上传图⽚片尺⼨寸和压缩级别 • H5 - 利⽤用Canvas压缩图⽚片再上传 • protocol buffer + gzip < json +gzip • spdy, http/2.0, quic



第17页

Payload 优化 - 响应篡改



第18页

Payload 优化 - 监控篡改



第19页

资源优化 - 增量下载



第20页

资源优化 - 图⽚片

• 修饰图⽚片⽮矢量化 (svg,canvas) • App端资源build

svg



png - 225*225



png - 130*130



png - 100*100 png - 48*48



第21页

运⾏行优化

• 模版预编译,html tmpl —> js function • hybrid js资源尽可能在构建阶段去除require • fake page / fake data • data aggregation • js execution time < 1/4



第22页

持续改进

• 数据采集,监控 • 分析痛点,⽤用真机 • 性能AB测试 • ⾃自上⽽而下推⾏行



第23页

Thanks



支持文件格式:*.pdf
上传最后阶段需要进行在线转换,可能需要1~2分钟,请耐心等待。