Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile...

68
QUALCOMM CONFIDENTIAL AND PROPRIETARY Understanding Mobile Web Browser Performance 1 Rajiv Vijayakumar Qualcomm Incorporated

Transcript of Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile...

Page 1: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

QUALCOMM CONFIDENTIAL AND PROPRIETARY

Understanding Mobile Web Browser Performance

1

Rajiv VijayakumarQualcomm Incorporated

Page 2: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Topics

§Mobile browser architecture§Mobile network latencies§Android HTTP: Parallel downloads and caching§Power consumption

2

Page 3: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

\3

SmartPhone Web Browsers

Page 4: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

\4

What is a “WebKit” Browser?

Page 5: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Browser Architecture

5

Page 6: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Layout Engine

Browser Architecture

5

Page 7: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Browser Architecture

5

WebKit

Page 8: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Browser Architecture

5

WebKit JavaScriptEngine

Page 9: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Browser Architecture

5

WebKit JavaScriptCoreor V8

Page 10: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Browser Architecture

5

WebKit

Rendering Networking

JavaScriptCoreor V8

Page 11: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Browser Architecture

5

Browser UI

WebKit

Rendering Networking

JavaScriptCoreor V8

Page 12: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

\6

Android

Page 13: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

\7

Android Browser ≠ Chrome

Page 14: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

<img src="http://www.qualcomm.com/imgA.jpg">

8

Page 15: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

<img src="http://www.qualcomm.com/imgA.jpg">

8

Time

Page 16: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

<img src="http://www.qualcomm.com/imgA.jpg">

8

DNS

Time

Page 18: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

<img src="http://www.qualcomm.com/imgA.jpg">

8

DNS TCP

Time

Page 20: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

<img src="http://www.qualcomm.com/imgA.jpg">

8

DNS TCP HTTP

Time

Page 21: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

<img src="http://www.qualcomm.com/imgA.jpg">

8

DNS TCP

GE

T /im

gA.jp

g

HTT

P/1

.1 2

00 O

K

HTTP

Time

Page 22: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

<img src="http://www.qualcomm.com/imgA.jpg">

8

DNS TCP

GE

T /im

gA.jp

g

HTT

P/1

.1 2

00 O

K

HTTP

Time

Page 23: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Latencies in 3G/4G Networks

9

Page 24: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Latencies in 3G/4G Networks

§ Initial connection setup: > 1s (on older 3G)

9

Page 25: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Latencies in 3G/4G Networks

§ Initial connection setup: > 1s (on older 3G)§Round trip time (RTT): 80ms or higher (typically)§ 100 - 200ms common

9

Page 26: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

RTTs at speed of light

§San Diego – New York : ~26ms

§San Diego – Johannesburg : ~110ms

10

Page 27: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Every round trip is at least 80-100ms

11

DNS TCP HTTP

Page 28: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Every round trip is at least 80-100ms

Including HTTP retrievals from a CDN

11

DNS TCP HTTP

Page 29: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

DNS

0

50

100

150

Seconds0 0.2 0.4 0.6 0.8 1.0 1.2 1.4

Histogram of DNS Lookup Times

Source: Data collected over 30 sites (280 domains) on Qualcomm corporate network12

Every new lookup takes 1 RTT + Lookup Time

Page 30: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Domain Sharding

§Use of multiple domains (cdn1.domain.com, cdn2.domain.com)

§Requests may not happen in parallel...

13

Page 31: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Parallel Downloads

14

cdn1.domain.com/img1A.pngcdn1.domain.com/img1B.pngcdn1.domain.com/img1C.pngcdn1.domain.com/img1D.png

cdn2.domain.com/img2A.pngcdn2.domain.com/img2B.pngcdn2.domain.com/img2C.pngcdn2.domain.com/img2D.png

8 images across 2 domains

Page 32: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

cdn1

img1A

cdn2

Browsers typically use 4-6 sockets per host

15

img1B

img1C

img1D

img2A

img2B

img2C

img2D

t=0

Page 33: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

cdn1

img1A

cdn2

Android

16

img1B

img1C

img1D

img2A img2Bimg2C

img2D

Page 34: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

cdn1

img1A

cdn2

Android

16

img1B

img1C

img1D

img2A img2Bimg2C

img2D

Page 35: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

cdn1

img1A

cdn2

Android

17

img1B

img1C

img2A

Page 36: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

cdn1

img1A

cdn2

Android

17

img1B

img1C

img2A

§ “Thread per socket” model

§4 HTTP threads

Page 37: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

QUALCOMM CONFIDENTIAL AND PROPRIETARY18 Source: DDMS (from Android SDK) connected to Android 2.3.3 emulator

Page 38: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

cdn1

img1A

cdn2

Android

19

img1B

img1C

img2A

§ “Thread per socket” model

§4 HTTP threads

Page 39: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

cdn1

img1A

cdn2

Android

19

img1B

img1C

img2A

§ “Thread per socket” model

§4 HTTP threads

§Only 4 sockets can have outstanding HTTP requests (“active”)

Page 40: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Android

20

cdn2

img2A img2Bimg2C

img2D

cdn1

img1A

img1B

img1C

img1D

Page 41: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Android

20

cdn2

img2A img2Bimg2C

img2D

Page 42: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Android

20

cdn2

img2A img2Bimg2C

img2D

Pipelining

Page 43: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Android

20

cdn2

img2A img2Bimg2C

img2D

§Send multiple requests without waiting for each response§ Responses must arrive in order

Pipelining

Page 44: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Android

20

cdn2

img2A img2Bimg2C

img2D

§Send multiple requests without waiting for each response§ Responses must arrive in order

§Android pipelines up to 3 requests on each socket

Pipelining

Page 45: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

§Not supported, or not enabled by default on most major browsers

§Historically caused problems (e.g. due to badly behaving proxies)

§Millions of Android devices actively using pipelining § Time to revisit... ?

Pipelining

21

Page 46: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

HTTP Caching

22

Page 47: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

HTTP Caching

§WebKit maintains a memory cache§ Default size = 8 MB

§Android has a persistent (file system) HTTP cache§ Default size = 6 MB

22

Page 48: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Cache Eviction

23

Page 49: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Cache Eviction

§What gets evicted to make room?

23

Page 50: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Cache Eviction

§What gets evicted to make room?

§Android policy: Prioritize base on expiration date§ Far future expiration dates have higher priority§ Evict lowest priority items first

23

Expires:Wed, 09 Jun 2021 21:12:36 GMT

Page 51: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Example of Cache ContentsVisited several sites, read blog posts and linked articles etc.

24

Page 52: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Example of Cache ContentsVisited several sites, read blog posts and linked articles etc.sqlite3 webviewCache.db 'select expires from cache order by expires desc;'

24

Page 53: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Example of Cache ContentsVisited several sites, read blog posts and linked articles etc.sqlite3 webviewCache.db 'select expires from cache order by expires desc;'

Expiration Year

2036

2035

...

2011

24

Page 54: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Example of Cache ContentsVisited several sites, read blog posts and linked articles etc.sqlite3 webviewCache.db 'select expires from cache order by expires desc;'

Expiration Year

2036

2035

...

2011

Cou

nt

0

50

100

150

200

Expiration Year2010 2020 2030 2040

24

Page 55: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

§Cache eviction policy affects performance

§Consider real-world cache occupancy when measuring cached page load performance

25

Page 56: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Caveats

§Devices can (and do!) differ from stock Android

§Differences in:§ Number of HTTP threads§ Cache size and eviction algorithm§ etc.

26

Page 57: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

PowerWhat is the power drawn from the battery while loading a web page?

27

Page 58: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

28 Source: Power measurements made on MDP MSM8655™ running Android 2.3 over commercial 3G network

Battery Current (mA)

Page 59: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

QUALCOMM CONFIDENTIAL AND PROPRIETARY29 Source: Power measurements made on MDP MSM8655™ running Android 2.3 over commercial 3G network

11s download (400mA)

10s idle (300mA)Baseline (200 mA)

Page 60: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Power§Any network traffic brings up the radio for several seconds§ Network dormancy timer: typically 10-15 seconds

§Use long periods for any periodic Ajax calls etc.

30 Source: Power measurements made on MDP MSM8655™ running Android 2.3 over commercial 3G network

Page 61: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

TCP FINs and Power

31 Source: Power measurements made on MDP MSM8655™ running Android 2.3 over commercial 3G network

Page 62: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

TCP FINs and Power§Android closes TCP sockets after ~6s of inactivity§ Sockets get closed at different times

31 Source: Power measurements made on MDP MSM8655™ running Android 2.3 over commercial 3G network

Page 63: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

TCP FINs and Power§Android closes TCP sockets after ~6s of inactivity§ Sockets get closed at different times

§Every socket close generates a TCP FIN§ Extends the dormancy timer§ Keeps the modem on for a 1-bit communication

31 Source: Power measurements made on MDP MSM8655™ running Android 2.3 over commercial 3G network

Page 64: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

TCP FINs and Power§Android closes TCP sockets after ~6s of inactivity§ Sockets get closed at different times

§Every socket close generates a TCP FIN§ Extends the dormancy timer§ Keeps the modem on for a 1-bit communication

§Optimization: close all sockets after page load completes

31 Source: Power measurements made on MDP MSM8655™ running Android 2.3 over commercial 3G network

Page 65: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

JavaScript Performance

§SunSpider benchmark numbers have improved dramatically in recent years§ Android (Jun 2011) < 2.5s§ Desktop Chrome (Sep 2008) ~2.8 s

32 Source: http://ejohn.org/blog/javascript-performance-rundown/

Page 66: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

developer.qualcomm.com/webtech

33

Page 67: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

34

Q&A

Page 68: Understanding Mobile Web Browser Performanceassets.en.oreilly.com/1/event/60/Understanding Mobile Web Browser...Understanding Mobile Web Browser Performance 1 ... Topics!Mobile browser

Nothing in these materials is an offer to sell any of the components or devices referenced herein. Certain components for use in the U.S. are available only through licensed suppliers. Some components are not available for use in the U.S.

Disclaimer

35

QUALCOMM Incorporated5775 Morehouse Drive

San Diego, CA. 92121-1714U.S.A.

Copyright © 2011 Qualcomm Incorporated. All rights reserved.

Not to be used, copied, reproduced in whole or in part, nor its contents revealed in any manner to others without the express written permission of Qualcomm.

Qualcomm and MSM8655 are trademarks of Qualcomm Incorporated, registered in the United States.

Other product and brand names may be trademarks or registered trademarks of their respective owners.