Understanding Mobile WebBrowser PerformanceJZ - LBS
12年9月13日星期四
Topics
• Mobile Browser Architecture
• Mobile Network
• HTTP:Parallel & Cache
• Power
• JavaScript Performance
• Tools
• WPO12年9月13日星期四
what is a “Webkit” Browser?
12年9月13日星期四
History
KDE HTML Widget
12年9月13日星期四
History
KDE HTML Widget
copy
12年9月13日星期四
History
KDE HTML Widget
KHTMLcopy
12年9月13日星期四
History
KDE HTML Widget
KHTMLcopy
12年9月13日星期四
History
KDE HTML Widget
KHTMLcopy
KJS
12年9月13日星期四
History
KDE HTML Widget
KHTMLcopy fork
KJS
12年9月13日星期四
History
KDE HTML Widget
KHTML
WebKitcopy fork
KJS
12年9月13日星期四
Android Browser Architecture
WebKit
WebCore JavaScriptCore
12年9月13日星期四
Android Browser Architecture
WebKit
WebCore JavaScriptCore
git clone https://android.googlesource.com/platform/external/webkit
12年9月13日星期四
http://map.baidu.com/img/red_markers.png
Time
12年9月13日星期四
http://map.baidu.com/img/red_markers.png
TimeDNS
12年9月13日星期四
http://map.baidu.com/img/red_markers.png
TimeDNS
map
.bai
du.c
om
map
.n.s
hife
n.co
m
123.
125.
114.
86
12年9月13日星期四
http://map.baidu.com/img/red_markers.png
TimeDNS
map
.bai
du.c
om
map
.n.s
hife
n.co
m
123.
125.
114.
86TCP
12年9月13日星期四
http://map.baidu.com/img/red_markers.png
TimeDNS
map
.bai
du.c
om
map
.n.s
hife
n.co
m
123.
125.
114.
86TCP
SYN
SYN
AC
K
AC
K
12年9月13日星期四
http://map.baidu.com/img/red_markers.png
TimeDNS
map
.bai
du.c
om
map
.n.s
hife
n.co
m
123.
125.
114.
86TCP HTTP
SYN
SYN
AC
K
AC
K
12年9月13日星期四
http://map.baidu.com/img/red_markers.png
TimeDNS
map
.bai
du.c
om
map
.n.s
hife
n.co
m
123.
125.
114.
86TCP HTTP
GET
/im
g/re
d_m
arke
rs.p
ng
HT
TP/
1.1
200
OK
SYN
SYN
AC
K
AC
K
12年9月13日星期四
http://map.baidu.com/img/red_markers.png
TimeDNS
map
.bai
du.c
om
map
.n.s
hife
n.co
m
123.
125.
114.
86TCP HTTP
GET
/im
g/re
d_m
arke
rs.p
ng
HT
TP/
1.1
200
OK
SYN
SYN
AC
K
AC
K
12年9月13日星期四
Mobile Network
0
0.1
0.2
0.3
0.4
2G 3G WIFI
30%30%
40%
12年9月13日星期四
2G Network
• Download Speed
• 15 K/s, or even worse
• RTT(Round Trip Time)
• 700ms - 900ms
12年9月13日星期四
How to Measure RTT
12年9月13日星期四
How to Measure RTT
• ping
12年9月13日星期四
How to Measure RTT
• ping
• use real TCP connection
12年9月13日星期四
How to Measure RTT
• ping
• use real TCP connection
• tools
12年9月13日星期四
How to Measure RTT
• ping
• use real TCP connection
• tools
12年9月13日星期四
How to Measure RTT
• ping
• use real TCP connection
• tools
¥12
12年9月13日星期四
12年9月13日星期四
RTT 800ms
12年9月13日星期四
RTT 800ms
DNS
12年9月13日星期四
RTT 800ms
DNS TCP
12年9月13日星期四
RTT 800ms
DNS TCP HTTP
12年9月13日星期四
RTT 800ms
DNS TCP HTTP
1 RTT
12年9月13日星期四
RTT 800ms
DNS TCP HTTP
1 RTT 1.5 RTT
12年9月13日星期四
RTT 800ms
DNS TCP HTTP
1 RTT 1.5 RTT 1 RTT
12年9月13日星期四
Network Detection
• W3C Network Information API
• android support (none, 2g, 3g, wifi)
• Measure real request download time
12年9月13日星期四
HTTP
12年9月13日星期四
Parallel Downloads Per Host
• Android:4 - 8
• iOS 4.x:6
• iOS 5.x:6 - 8
12年9月13日星期四
Different with Desktop
• PC
• Simultaneously
• Mobile
• Seldom Simultaneously
12年9月13日星期四
Different with Desktop
• PC
• Simultaneously
• Mobile
• Seldom Simultaneously
12年9月13日星期四
Different with Desktop
• PC
• Simultaneously
• Mobile
• Seldom Simultaneously
12年9月13日星期四
Different with Desktop
• PC
• Simultaneously
• Mobile
• Seldom Simultaneously
12年9月13日星期四
Different with Desktop
• PC
• Simultaneously
• Mobile
• Seldom Simultaneously
12年9月13日星期四
Domain Sharding
• Increase parallel downloads
12年9月13日星期四
Domain ShardingDownside of
12年9月13日星期四
• Increase DNS lookups
Domain ShardingDownside of
12年9月13日星期四
• Increase DNS lookups
• Increase TCP connections
Domain ShardingDownside of
12年9月13日星期四
No need to consider using domain sharding
12年9月13日星期四
No need to consider using domain sharding
EXCEPT...
12年9月13日星期四
map encountered a problem
12年9月13日星期四
map encountered a problem
12年9月13日星期四
map encountered a problem
12年9月13日星期四
map encountered a problem
tiles load error
12年9月13日星期四
HTTP Pipelining
12年9月13日星期四
HTTP Pipelining
12年9月13日星期四
12年9月13日星期四
12年9月13日星期四
no pipelining
12年9月13日星期四
no pipelining
12年9月13日星期四
no pipelining
with pipelining
12年9月13日星期四
Mobile Support
• Android Support
• iOS 5 Support
12年9月13日星期四
12年9月13日星期四
12年9月13日星期四
iOS Safari
12年9月13日星期四
iOS Safari
12年9月13日星期四
iOS Safari
Android Browser
12年9月13日星期四
Cache
12年9月13日星期四
Mobile Cache Size
iPhone4 Android iPad1 iPad2
OS iOS 4.3 Android 2.x iOS 4.3 iOS 4.3
persistent 0 4 0 0
memory 100 4 20 50
12年9月13日星期四
But a little bit chaos
there is no consistent data
12年9月13日星期四
Cache Limit
• Mobile cache is limited
• Single component size limit
12年9月13日星期四
Cache Eviction
12年9月13日星期四
Cache Eviction
• Prioritize base on expiration date (Android)
12年9月13日星期四
Cache Eviction
• Prioritize base on expiration date (Android)
• Far future expiration dates have higher priority
12年9月13日星期四
Cache Eviction
• Prioritize base on expiration date (Android)
• Far future expiration dates have higher priority
• Evict lowest priority items first
12年9月13日星期四
More about Caching
12年9月13日星期四
More about Caching
• Life Circle:
12年9月13日星期四
More about Caching
• Life Circle:
• tab switching
12年9月13日星期四
More about Caching
• Life Circle:
• tab switching
• lock screen
12年9月13日星期四
More about Caching
• Life Circle:
• tab switching
• lock screen
• restart browser
12年9月13日星期四
More about Caching
• Life Circle:
• tab switching
• lock screen
• restart browser
• restart phone
12年9月13日星期四
More about Caching
• Life Circle:
• tab switching
• lock screen
• restart browser
• restart phone
• Load from home screen
12年9月13日星期四
Cache Recommendations
12年9月13日星期四
Cache Recommendations
• Use far future cache expiration headers
12年9月13日星期四
Cache Recommendations
• Use far future cache expiration headers
• Limit single component sizes
12年9月13日星期四
Cache Recommendations
• Use far future cache expiration headers
• Limit single component sizes
• Use Application Cache, LocalStorage and Database
12年9月13日星期四
Cache Recommendations
• Use far future cache expiration headers
• Limit single component sizes
• Use Application Cache, LocalStorage and Database
• Do your own test
12年9月13日星期四
Cache References
• Mobile Browser Cache Limits: Android, iOS, and webOS - YUI Blog
• Mobile Browser Cache Limits, Revisited - YUI Blog
• Understanding Mobile Cache Sizes - Guy from Mobitest
• Mobile Browser Cache Sizes – Round 2 - Guy from Mobitest
• Mobile cacheability - WINK Blog
• Early findings: Mobile browser cache persistence and behaviour
• Mobile cache file sizes - Steve Sounder12年9月13日星期四
Power
12年9月13日星期四
What about battery consumption while loading a web page ?
12年9月13日星期四
12年9月13日星期四
12年9月13日星期四
Powser Consumption
• JavaScript: Avoid unused functions
• CSS: Avoid unused css rules
• Image: Use jpeg
12年9月13日星期四
JavaScript Performance
• SunSpider benchmark numbers have improved dramatically in rencent years
• Android (Jun 2011) < 2.5s
• Desktop Chrome (Sep 2008) ~ 2.8s
12年9月13日星期四
Touch, No Click
12年9月13日星期四
Touch, No Click
• Click event delays 400ms
12年9月13日星期四
Touch, No Click
• Click event delays 400ms
• Use touch event instead, delay < 100ms
12年9月13日星期四
Common WPO
• gzip
• reduce dns lookups
• reduce requests
• minify js and css
• scripts to the bottom (may be)
12年9月13日星期四
Image & Icon
12年9月13日星期四
Image & Icon
• Use base64 encoded string
12年9月13日星期四
Image & Icon
• Use base64 encoded string
• Can be gzipped
12年9月13日星期四
Image & Icon
• Use base64 encoded string
• Can be gzipped
• Size increase 0.8% but save lots of request
12年9月13日星期四
Tools
• Fiddler(PC), Charles(PC, Mac, Linux)
• Wireshark(PC, Mac, Linux)
• Ping Pro(iOS)
• iWebInspector, WEINRE, Chrome for Android, UC
• Mobitest
12年9月13日星期四
Q&Athanks
12年9月13日星期四