移动App性能优化经验分享

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

移动App / Web

• App • Native • Hybrid • H5直连

• Web • H5 • SEO

DNS 优化

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

CDN优化

CDN优化 － ⾃自动压缩合并

CDN优化 － 动静分离

海外CDN － DNS

2500.0#

2000.0#

1500.0#

1000.0#

500.0#

0.0# _dns _dns

海外CDN － Connect



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

50.0# 0.0#



_connect



_connect

海外CDN － Request



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

0.0#



_request



_request

海外CDN － Response

1400.0#



1200.0#



1000.0#



800.0#



600.0#



400.0#



200.0#



0.0#



_response



_response

CDN － 质量监控(国内)

CDN － 质量监控(海外)

Payload 优化 － ⺴⽹网络带宽

Payload 优化 － ⺴⽹网络带宽

Payload 优化 － ⺴⽹网络带宽

Payload 优化 － ⺴⽹网络带宽

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

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

Payload 优化 － 响应篡改

Payload 优化 － 监控篡改

资源优化 － 增量下载

资源优化 － 图⽚片

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

svg



png - 225*225



png - 130*130



png - 100*100 png - 48*48

运⾏行优化

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

持续改进

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

Thanks