Why are Web Browsers Slow on Smartphones? Zhen Wang (Rice) Felix - - PowerPoint PPT Presentation

▶
why are web browsers slow on smartphones
SMART_READER_LITE
LIVE PREVIEW

Why are Web Browsers Slow on Smartphones? Zhen Wang (Rice) Felix - - PowerPoint PPT Presentation

Mar 13, 2023 158 likes •750 views

Why are Web Browsers Slow on Smartphones? Zhen Wang (Rice) Felix Xiaozhu Lin (Rice) Lin Zhong (Rice) Mansoor Chishtie (TI) WINDOW TO THE CLOUD 2 Mobile browsers are slow 17 sec Nexus One (N1) HTC Dream (G1) 13 sec 12 sec 8 sec Top 10

slide-1
SLIDE 1

Why are Web Browsers Slow on Smartphones?

Zhen Wang (Rice) Felix Xiaozhu Lin (Rice) Lin Zhong (Rice) Mansoor Chishtie (TI)

slide-2
SLIDE 2

WINDOW TO THE CLOUD

2

slide-3
SLIDE 3

Mobile browsers are slow

3

8 sec 13 sec 12 sec 17 sec Top 10 Mobile Website Top10 Non-mobile Webpage Nexus One (N1) HTC Dream (G1)

slide-4
SLIDE 4
  • What does the browser show?
  • How does the browser work?
  • Where is the bottleneck?

4

slide-5
SLIDE 5

What does the browser show?

0% 20% 40% 60% 80% 100%

1 25 25 iPhone 3GS Users Non-mobile webpages Mobile webpages

5

avg

slide-6
SLIDE 6

How does the browser work?

Scripting Style Formatting HTML Parsing

Loaded resources Update IR

Layout

Graphics

Painting

New resources to load

Resource Loading

Internal Representation (IR)

......

6

IR operations: Parsing, Style, Scripting, Layout, Painting

slide-7
SLIDE 7

Where is the bottleneck?

  • Existing work on PC browsers

– Layout – Style formatting – Scripting

7

  • 1. C. Stockwell, "IE8 Performance," http://blogs.msdn.com/b/ie/archive/2008/08/26/ie8-performance.aspx, 2008.
  • 2. L. A. Meyerovich and R. Bodik, "Fast and parallel webpage layout," in Proc. Int. Conf. World Wide Web (WWW) Raleigh, North Carolina, USA: ACM, 2010.
  • 3. K. Zhang, L. Wang, A. Pan, and B. B. Zhu, "Smart caching for web browsers," in Proc. Int. Conf. World Wide Web (WWW) Raleigh, North Carolina, USA: ACM, 2010.
slide-8
SLIDE 8

8

Is it true for mobile browsers?

Layout, Style, Scripting

slide-9
SLIDE 9

Performance characterization

  • Metric: browser delay

– Starting point: when the user presses the “GO” button of the browser to open an URL. – End point: when the browser’s page loading progress bar indicates 100%.

9

slide-10
SLIDE 10

Performance characterization

  • Dependency timeline characterization
  • What-if analysis

10

slide-11
SLIDE 11

Dependency timeline characterization

11

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

slide-12
SLIDE 12

Dependency timeline characterization

12

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

request

slide-13
SLIDE 13

Dependency timeline characterization

13

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

redirection

slide-14
SLIDE 14

Dependency timeline characterization

14

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Data packets

slide-15
SLIDE 15

Dependency timeline characterization

15

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

This is part of resource loading. It is mainly spent on network.

slide-16
SLIDE 16

Glue operation

Dependency timeline characterization

16

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

slide-17
SLIDE 17

Dependency timeline characterization

17

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

intra-group dependency

slide-18
SLIDE 18

Dependency timeline characterization

18

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

inter-group dependency

slide-19
SLIDE 19

What overall performance gain will be achieved if a browser

  • peration is accelerated?

19

slide-20
SLIDE 20

What-if analysis

20

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style Shrink

slide-21
SLIDE 21

What-if analysis

21

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style Shift to the left Shrink

slide-22
SLIDE 22

What-if analysis

22

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style They will not move Shrink Shift to the left

slide-23
SLIDE 23

What-if analysis

23

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

slide-24
SLIDE 24

What-if analysis

24

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Original

slide-25
SLIDE 25

What-if analysis

25

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style

Original New

slide-26
SLIDE 26

Experimental setup

  • Platform:

– HTC Dream (G1): 528MHz – Nexus One (N1): 1GHz

  • Operating System

– Android 2.1 (Eclair)

  • Benchmark Webpages:

– Top 10 mobile websites – Top 10 visited non-mobile webpages from LiveLab

26

1.Nielsen.com, "Top mobiel phones, sites and brands for 2009," http://blog.nielsen.com/nielsenwire/online_mobile/top-mobile-phones-sites-and-brands-for-2009/, 2009. 2.C. Shepard, A. Rahmati, C. Tossell, L. Zhong, and P. Kortum, "Live- Lab: Measuring Wireless Networks and Smartphone Users in the Field," in Proc. Workshop on Hot Topics in Measurement & Model-ing of Computer Systems, June 2010.

slide-27
SLIDE 27

Experimental setup

  • We used three network

conditions:

– Emulated enterprise Ethernet (no traffic control) – Typical 3G network (T-mobile) – Emulated adverse network

  • First-hop RTT: 400ms
  • Bandwidth (downlink/uplink):

500Kbps/100Kbps

27

slide-28
SLIDE 28

Logging information

  • Time stamp for browser operations

– Overhead: <1%

  • Tcpdump

– Overhead: <2% (CPU); <0.4% (MEM)

28

slide-29
SLIDE 29

Results

two take-away messages

29

slide-30
SLIDE 30

IR operations do not matter much!

Parsing, Style, Scripting, Layout, Painting

30

slide-31
SLIDE 31

IR operations do not matter much

0% 2% 4% 8 16 24 32 Overall Improvement Layout Calculating Speedup

Layout

Non-mobile Web Mobile Web 0% 2% 4% 8 16 24 32 Overall Improvement Style Formatting Speedup

Style

Non-mobile Web Mobile Web 0% 2% 4% 8 16 24 32 Overall Improvement Scripting Speedup

Script

Non-mobile Web Mobile Web

31

slide-32
SLIDE 32

IR operations do not matter much

0% 2% 4% 8 16 24 32 Overall Improvement Layout Calculating Speedup

Layout

Non-mobile Web Mobile Web 0% 2% 4% 8 16 24 32 Overall Improvement Style Formatting Speedup

Style

Non-mobile Web Mobile Web 0% 2% 4% 8 16 24 32 Overall Improvement Scripting Speedup

Script

Non-mobile Web Mobile Web

32

slide-33
SLIDE 33

IR operations do not matter much

0% 2% 4% 6% 8% 8 16 24 32

Overall Improvement Speedup Combined: Parsing, Layout, Style, Scripting, Painting, Glue

Non-mobile Web Mobile Web

33

slide-34
SLIDE 34

Resource loading is the bottleneck!

34

slide-35
SLIDE 35

Resource loading is the bottleneck

35

0% 200% 400% 600% 8 16 24 32 Overall Improvement Resource Loading Speedup

Resource Loading

Non-mobile Web Mobile Web

slide-36
SLIDE 36

Resource loading is the bottleneck

36

0% 200% 400% 600% 8 16 24 32 Overall Improvement Resource Loading Speedup

Resource Loading

Non-mobile Web Mobile Web

slide-37
SLIDE 37

Resource loading is the bottleneck

  • Network RTT
  • Network Bandwidth
  • Browser loading procedure
  • Processing power

37

slide-38
SLIDE 38

Network RTT matters

10 20 30 200 400 Browser Delay (sec) Injected RTT (ms)

G1 - Non-mobile Web N1 - Non-mobile Web G1 - Mobile Web N1 - Mobile Web

38

3G

slide-39
SLIDE 39

Network bandwidth doesn’t matter

10 20 30 250/50 500/100 1000/200 1500/400 Browser Delay (sec) Bandwidth: Downlink/Uplink (Kbps)

G1 - Non-mobile Web N1 - Non-mobile Web G1 - Mobile Web N1 - Mobile Web

39

3G

slide-40
SLIDE 40

Browser loading procedure

40

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style New resources can only be discovered after parsing a loaded resource

slide-41
SLIDE 41

Browser loading procedure

41

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style Redirections on the main HTML file further delay the discovering time of later resources

slide-42
SLIDE 42

Browser loading procedure

42

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000 3500 4000

5 6 7 8

Scripting Layout Resource Loading Painting Parsing Style Parsing of the HTML file is blocked by JavaScripts

slide-43
SLIDE 43

Browser loading procedure

  • Up to 25 concurrent requests for top

mobile/non-mobile webpages

  • Constrains on concurrent TCP connections

43

Mobile Browser Connections/hostname Maximum connections Android 4 4 iPhone 4.3 6 35 Blackberry 9700 4 16 Opera Mobile 4 4 Opera Mini 10 60

http://www.browserscope.org/

slide-44
SLIDE 44

Average number of resources

44

22 96 Top 10 Mobile Website Top10 Non-mobile Webpage

slide-45
SLIDE 45

Average number of network round trips

45

19 27 Top 10 Mobile Website Top10 Non-mobile Webpage

slide-46
SLIDE 46

Processing power in resource loading

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000

5 6 7 8 9

Scripting Layout Resource Loading Painting Parsing Style http://mail.yahoo.com

46

This is part of resource loading. It is mainly spent on network.

slide-47
SLIDE 47

Processing power in resource loading

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000

5

(i)

6 7 8 9

DNS lookup query

Scripting Layout Resource Loading Painting Parsing Style http://mail.yahoo.com

47

slide-48
SLIDE 48

Processing power in resource loading

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000

5

(i) (ii)

6 7 8 9

DNS lookup query TCP connection established HTTP GET sent out

Scripting Layout Resource Loading Painting Parsing Style http://mail.yahoo.com

48

slide-49
SLIDE 49

Processing power in resource loading

Elapsed time (ms)

1 2 3 4

Resource Group

0 1000 1500 2000 2500 3000

5

(i) (ii) (iii)

6 7 8 9

DNS lookup query TCP connection established HTTP GET sent out

Scripting Layout Resource Loading Painting Parsing Style http://mail.yahoo.com

49

slide-50
SLIDE 50

50

126ms 13ms 98ms 40ms 3ms 18ms (i) (ii) (iii) G1 N1

Time spent by G1 and N1 for those three cases

slide-51
SLIDE 51

Total time spent in the three cases on average when opening a mobile webpage

51

2 sec 1 sec G1 N1

slide-52
SLIDE 52

Processing power in resource loading

  • Other uncategorized processing

– The OS moves the data from network stack to browser after receiving data packets – Computation for secure connection (HTTPS)

52

slide-53
SLIDE 53

More powerful hardware improves the browser delay mainly through faster OS services and network stack instead of faster IR operations.

53

slide-54
SLIDE 54

Performance characterization results

  • IR operations do not matter much
  • Resource loading is the bottleneck

– Network RTT (X) – Network bandwidth – Browser loading procedure (X) – Processing power (X)

54

slide-55
SLIDE 55

How to improve mobile browser’s performance?

Reduce RTT

  • Cloudlet
  • Data staging

Reduce # of Round Trips

  • Web Pre-fetching
  • Resource batching
  • Data URI scheme
  • Speculative resource

loading

55

1.M. Satyanarayanan, P. Bahl, R. Caceres, and N. Davies, "The Case for VM-Based Cloudlets in Mobile Computing," IEEE Pervasive Computing, vol. 8, pp. 14-23, 2009. 2.J. Flinn, S. Sinnamohideen, N. Tolia, and M. Satyanaryanan, "Data Staging on Untrusted Surrogates," in Proceedings of the 2nd USENIX Conference on File and Storage Technologies San Francisco, CA: USENIX Association, 2003. 3.V. N. Padmanabhan and J. C. Mogul, "Using predictive prefetching to improve World Wide Web latency," SIGCOMM Comput. Commun. Rev., vol. 26, pp. 22-36, 1996. 4.Skyfire: http://www.skyfire.com/. 5.L. Masinter, "The "data" URL scheme," http://tools.ietf.org/html/rfc2397, 1998.

slide-56
SLIDE 56

On-going work

  • Speculative mobile browser design
  • Fully understand the impact of hardware
  • OS and network service acceleration

56

http://www.owlnet.rice.edu/~zw3/projects_Tempo.html

slide-57
SLIDE 57

57

slide-58
SLIDE 58

Benchmark webpages

mobile

http://maps.google.com http://www.espn.com http://www.cnn.com http://www.google.com http://mail.yahoo.com http://mail.google.com http://www.weather.com http://www.facebook.com http://www.hotmail.com http://mail.aol.com

Non-mobile

http://freeappaday.com/ https://owlspace-ccm.rice.edu/portal http://www.restaurant.com/ http://www.neopets.com/games/ http://arstechnica.com/ http://houston.craigslist.org/ http://houston.varsitytutors.com/ http://www.morewords.com/ http://tripplanner.ridemetro.org/hiwire http://registrar.rice.edu/

58