Why are Web Browsers Slow on ?

Zhen Wang (Rice) Felix Xiaozhu Lin (Rice) Lin Zhong (Rice) Mansoor Chishtie (TI) WINDOW TO THE CLOUD

2 Mobile browsers are slow

Nexus One (N1) HTC Dream (G1) 17 sec

13 sec 12 sec

8 sec

Top 10 Mobile Website Top10 Non-mobile Webpage 3 • What does the browser show?

• How does the browser work?

• Where is the bottleneck?

4 What does the browser show?

Non-mobile webpages Mobile webpages 100%

80%

60% avg 40%

20%

0% 1 25 25 iPhone 3GS Users 5 How does the browser work?

New resources to load Internal Representation (IR)

HTML Layout Parsing Loaded Update Painting resources IR Resource Style Graphics Loading Formatting ......

Scripting

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

6 Where is the bottleneck?

• Existing work on PC browsers – Layout – Style formatting – Scripting

1. . Stockwell, "IE8 Performance," http://blogs.msdn.com/b/ie/archive/2008/08/26/ie8-performance.aspx, 2008. 7 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. Is it true for mobile browsers?

Layout, Style, Scripting

8 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 Performance characterization

• Dependency timeline characterization

• What-if analysis

10 Dependency timeline characterization

Resource Loading Parsing Scripting Style Layout Painting

8

7

6

5

Resource Group Resource 4 3

2

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

11 Dependency timeline characterization

Resource Loading Parsing Scripting Style Layout Painting

8

7

6

5

Resource Group Resource 4 3 request

2

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

12 Dependency timeline characterization

Resource Loading Parsing Scripting Style Layout Painting

8

7

6

5

Resource Group Resource 4 3 redirection 2

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

13 Dependency timeline characterization

Resource Loading Parsing Scripting Style Layout Painting

8

7

6

5

Resource Group Resource 4 3 Data packets 2

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

14 Dependency timeline characterization

Resource Loading Parsing Scripting Style Layout Painting

8

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

Resource Group Resource 4 3

2

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

15 Dependency timeline characterization

Resource Loading Parsing Scripting Style Layout Painting

8

7

6

5 Glue operation

Resource Group Resource 4 3

2

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

16 Dependency timeline characterization

Resource Loading Parsing Scripting Style Layout Painting

8

7

6

5

Resource Group Resource 4 intra-group dependency 3

2

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

17 Dependency timeline characterization

Resource Loading Parsing Scripting Style Layout Painting

8

7

6

5 Resource Group Resource 4 inter-group dependency 3

2

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

18 What overall performance gain will be achieved if a browser operation is accelerated?

19 What-if analysis

Resource Loading Parsing Scripting Style Layout Painting

8

7 6 Shrink 5

Resource Group Resource 4 3

2

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

20 What-if analysis

Resource Loading Parsing Scripting Style Layout Painting Shift to the left

8

7 6 Shrink 5

Resource Group Resource 4 3

2

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

21 What-if analysis

Resource Loading Parsing Scripting Style Layout Painting Shift to the left

8

7 6 Shrink 5

Resource Group Resource 4 3 They will 2 not move

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

22 What-if analysis

Resource Loading Parsing Scripting Style Layout Painting

8

7

6

5

Resource Group Resource 4 3

2

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

23 What-if analysis Original Resource Loading Parsing Scripting Style Layout Painting

8

7

6

5

Resource Group Resource 4 3

2

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

24 What-if analysis New Original Resource Loading Parsing Scripting Style Layout Painting

8

7

6

5

Resource Group Resource 4 3

2

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

25 Experimental setup

• Platform: – HTC Dream (G1): 528MHz – (N1): 1GHz

• – Android 2.1 (Eclair)

• Benchmark Webpages: – Top 10 mobile websites – Top 10 visited non-mobile webpages from LiveLab

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 Users in the Field," in Proc. Workshop on Hot Topics in 26 Measurement & Model-ing of Computer Systems, June 2010. Experimental setup

• We used three network conditions: – Emulated enterprise Ethernet (no traffic control)

– Typical network (T-mobile)

– Emulated adverse network • First-hop RTT: 400ms • Bandwidth (downlink/uplink): 500Kbps/100Kbps

27 Logging information

• Time stamp for browser operations – Overhead: <1%

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

28 Results two take-away

29 IR operations do not matter much!

Parsing, Style, Scripting, Layout, Painting

30 IR operations do not matter much

Layout Style 4% 4% Non-mobile Web Non-mobile Web Mobile Web Mobile Web 2% 2%

0% Improvement Overall

Overall Improvement Overall 0% 0 8 16 24 32 0 8 16 24 32 Layout Calculating Speedup Style Formatting Speedup Script 4%

2%

Non-mobile Web Mobile Web Overall Improvement Overall 0% 0 8 16 24 32 Scripting Speedup 31 IR operations do not matter much

Layout Style 4% 4% Non-mobile Web Non-mobile Web Mobile Web Mobile Web 2% 2%

0% Improvement Overall

Overall Improvement Overall 0% 0 8 16 24 32 0 8 16 24 32 Layout Calculating Speedup Style Formatting Speedup Script 4%

2%

Non-mobile Web Mobile Web Overall Improvement Overall 0% 0 8 16 24 32 Scripting Speedup 32 IR operations do not matter much

Combined: Parsing, Layout, Style, Scripting, Painting, Glue

8%

6%

4%

2% Non-mobile Web

Overall Improvement Overall Mobile Web 0% 0 8 16 24 32 Speedup

33 Resource loading is the bottleneck!

34 Resource loading is the bottleneck

Resource Loading

600%

400%

200% Non-mobile Web Mobile Web

Overall Improvement Overall 0% 0 8 16 24 32 Resource Loading Speedup

35 Resource loading is the bottleneck

Resource Loading

600%

400%

200% Non-mobile Web Mobile Web

Overall Improvement Overall 0% 0 8 16 24 32 Resource Loading Speedup

36 Resource loading is the bottleneck

• Network RTT

• Network Bandwidth

• Browser loading procedure

• Processing power

37 Network RTT matters

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

20

10 Browser Delay (sec) Delay Browser

3G 0 0 200 400 Injected RTT (ms)

38 Network bandwidth doesn’t matter

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

20

10 Browser Delay (sec) Delay Browser 3G 0 250/50 500/100 1000/200 1500/400 Bandwidth: Downlink/Uplink (Kbps) 39 Browser loading procedure

Resource Loading Parsing Scripting Style Layout Painting

8

7 New resources can only be discovered after 6 parsing a loaded resource 5

Resource Group Resource 4 3

2

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

40 Browser loading procedure

Resource Loading Parsing Scripting Style Layout Painting

8

7 Redirections on the main HTML file further 6 delay the discovering 5 time of later resources

Resource Group Resource 4 3

2

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

41 Browser loading procedure

Resource Loading Parsing Scripting Style Layout Painting

8 7 Parsing of the HTML file is 6 blocked by JavaScripts

5

Resource Group Resource 4 3

2

1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms)

42 Browser loading procedure

• Up to 25 concurrent requests for top mobile/non-mobile webpages

• Constrains on concurrent TCP connections

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/ 43 Average number of resources

96

22

Top 10 Mobile Website Top10 Non-mobile Webpage

44 Average number of network round trips

27

19

Top 10 Mobile Website Top10 Non-mobile Webpage

45 Processing power in resource loading

Resource Loading Parsing Scripting Style Layout Painting 9 8

7

6

5

Resource Group Resource 4 This is part of resource loading. 3 It is mainly spent on network. 2

1 0 1000 1500 2000 2500 3000 Elapsed time (ms)

http://mail.yahoo.com 46 Processing power in resource loading

Resource Loading Parsing Scripting Style Layout Painting 9 (i) 8

7

6

5 DNS

lookup Resource Group Resource 4 query 3

2

1 0 1000 1500 2000 2500 3000 Elapsed time (ms)

http://mail.yahoo.com 47 Processing power in resource loading

Resource Loading Parsing Scripting Style Layout Painting 9 (i) (ii) 8 TCP 7 connection HTTP GET established sent out 6

5 DNS

lookup Resource Group Resource 4 query 3

2

1 0 1000 1500 2000 2500 3000 Elapsed time (ms)

http://mail.yahoo.com 48 Processing power in resource loading

Resource Loading Parsing Scripting Style Layout Painting 9 (i) (ii) (iii) 8 TCP 7 connection HTTP GET established sent out 6

5 DNS

lookup Resource Group Resource 4 query 3

2

1 0 1000 1500 2000 2500 3000 Elapsed time (ms)

http://mail.yahoo.com 49 Time spent by G1 and N1 for those three cases

126ms G1 N1

98ms

40ms

18ms 13ms 3ms

(i) (ii) (iii)

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

2 sec

1 sec

G1 N1

51 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 More powerful hardware improves the browser delay mainly through faster OS services and network stack instead of faster IR operations.

53 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 How to improve mobile browser’s performance?

Reduce RTT Reduce # of Round Trips • Cloudlet • Web Pre-fetching • Data staging • Resource batching • Data URI scheme • Speculative resource loading

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. 55 4.Skyfire: http://www.skyfire.com/. 5.L. Masinter, "The "data" URL scheme," http://tools.ietf.org/html/rfc2397, 1998. On-going work

• Speculative mobile browser design

• Fully understand the impact of hardware

• OS and network service acceleration

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

56 57 Benchmark webpages mobile Non-mobile http://maps.google.com http://freeappaday.com/ http://www.espn.com https://owlspace-ccm.rice.edu/portal http://www.cnn.com http://www.restaurant.com/ http://www.google.com http://www.neopets.com/games/ http://mail.yahoo.com http://arstechnica.com/ http://mail.google.com http://houston.craigslist.org/ http://www.weather.com http://houston.varsitytutors.com/ http://www.facebook.com http://www.morewords.com/ http://www.hotmail.com http://tripplanner.ridemetro.org/hiwire http://mail.aol.com http://registrar.rice.edu/

58