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?

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日星期四