Understanding Mobile Web Browser Performance

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?


History

KDE HTML Widget


History

KDE HTML Widget

copy


History

KDE HTML Widget

KHTMLcopy


History

KDE HTML Widget

KHTMLcopy


History

KDE HTML Widget

KHTMLcopy

KJS


History

KDE HTML Widget

KHTMLcopy fork

KJS


History

KDE HTML Widget

KHTML

WebKitcopy fork

KJS


Android Browser Architecture

WebKit

WebCore JavaScriptCore


Android Browser Architecture

WebKit

WebCore JavaScriptCore

git clone https://android.googlesource.com/platform/external/webkit


https://android.googlesource.com/platform/external/webkit

https://android.googlesource.com/platform/external/webkit

http://map.baidu.com/img/red_markers.png

Time





TimeDNS





TimeDNS

map

.bai

du.c

om

map

.n.s

hife

n.co

m

123.

125.

114.

86





TimeDNS

map

.bai

du.c

om

map

.n.s

hife

n.co

m

123.

125.

114.

86TCP





TimeDNS

map

.bai

du.c

om

map

.n.s

hife

n.co

m

123.

125.

114.

86TCP

SYN

SYN

AC

K

AC

K





TimeDNS

map

.bai

du.c

om

map

.n.s

hife

n.co

m

123.

125.

114.

86TCP HTTP

SYN

SYN

AC

K

AC

K





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





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




Mobile Network

0

0.1

0.2

0.3

0.4

2G 3G WIFI

30%30%

40%


2G Network

• Download Speed

• 15 K/s, or even worse

• RTT(Round Trip Time)

• 700ms - 900ms


How to Measure RTT


How to Measure RTT

• ping


How to Measure RTT

• ping

• use real TCP connection


How to Measure RTT

• ping


• tools


How to Measure RTT

• ping


• tools


How to Measure RTT

• ping


• tools

￥12



RTT 800ms


RTT 800ms

DNS


RTT 800ms

DNS TCP


RTT 800ms

DNS TCP HTTP


RTT 800ms

DNS TCP HTTP

1 RTT


RTT 800ms

DNS TCP HTTP

1 RTT 1.5 RTT


RTT 800ms

DNS TCP HTTP

1 RTT 1.5 RTT 1 RTT


Network Detection

• W3C Network Information API

• android support (none, 2g, 3g, wifi)

• Measure real request download time


HTTP


Parallel Downloads Per Host

• Android：4 - 8

• iOS 4.x：6

• iOS 5.x：6 - 8


Different with Desktop

• PC

• Simultaneously

• Mobile

• Seldom Simultaneously



• PC

• Simultaneously

• Mobile




• PC

• Simultaneously

• Mobile




• PC

• Simultaneously

• Mobile




• PC

• Simultaneously

• Mobile



Domain Sharding

• Increase parallel downloads


Domain ShardingDownside of


• Increase DNS lookups



• Increase DNS lookups

• Increase TCP connections



No need to consider using domain sharding


No need to consider using domain sharding

EXCEPT...


map encountered a problem







tiles load error


HTTP Pipelining


HTTP Pipelining




no pipelining


no pipelining


no pipelining

with pipelining


Mobile Support

• Android Support

• iOS 5 Support




iOS Safari


iOS Safari


iOS Safari

Android Browser


Cache


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


But a little bit chaos

there is no consistent data


Cache Limit

• Mobile cache is limited

• Single component size limit


Cache Eviction


Cache Eviction

• Prioritize base on expiration date (Android)


Cache Eviction


• Far future expiration dates have higher priority


Cache Eviction


• Far future expiration dates have higher priority

• Evict lowest priority items first


More about Caching


More about Caching

• Life Circle:


More about Caching

• Life Circle:

• tab switching


More about Caching

• Life Circle:

• tab switching

• lock screen


More about Caching

• Life Circle:

• tab switching

• lock screen

• restart browser


More about Caching

• Life Circle:

• tab switching

• lock screen

• restart browser

• restart phone


More about Caching

• Life Circle:

• tab switching

• lock screen

• restart browser

• restart phone

• Load from home screen


Cache Recommendations



• Use far future cache expiration headers




• Limit single component sizes





• Use Application Cache, LocalStorage and Database





• Use Application Cache, LocalStorage and Database

• Do your own test


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


What about battery consumption while loading a web page ?




Powser Consumption

• JavaScript: Avoid unused functions

• CSS: Avoid unused css rules

• Image: Use jpeg


JavaScript Performance

• SunSpider benchmark numbers have improved dramatically in rencent years

• Android (Jun 2011) < 2.5s

• Desktop Chrome (Sep 2008) ~ 2.8s


Touch, No Click


Touch, No Click

• Click event delays 400ms


Touch, No Click

• Click event delays 400ms

• Use touch event instead, delay < 100ms


Common WPO

• gzip

• reduce dns lookups

• reduce requests

• minify js and css

• scripts to the bottom (may be)


Image & Icon


Image & Icon

• Use base64 encoded string


Image & Icon


• Can be gzipped


Image & Icon


• Can be gzipped

• Size increase 0.8% but save lots of request


Tools

• Fiddler(PC), Charles(PC, Mac, Linux)

• Wireshark(PC, Mac, Linux)

• Ping Pro(iOS)

• iWebInspector, WEINRE, Chrome for Android, UC

• Mobitest


Q&Athanks


Understanding Mobile Web Browser Performance

Technology