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

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 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. C. 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 Resource Group 8 7 6 5 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 Resource Group 8 7 6 5 4 request 3 2 1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms) 12

Dependency timeline characterization Resource Loading Parsing Scripting Style Layout Painting Resource Group 8 7 6 5 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 Resource Group 8 7 6 5 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 Resource Group 8 7 This is part of resource loading. 6 It is mainly spent on network. 5 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 Resource Group 8 7 6 Glue operation 5 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 Resource Group 8 7 6 5 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 Resource Group 8 7 6 5 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 Resource Group 8 7 6 Shrink 5 4 3 2 1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms) 20

What-if analysis Resource Loading Parsing Scripting Shift to the left Style Layout Painting Resource Group 8 7 6 Shrink 5 4 3 2 1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms) 21

What-if analysis Resource Loading Parsing Scripting Shift to the left Style Layout Painting Resource Group 8 7 6 Shrink 5 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 Resource Group 8 7 6 5 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 Resource Group 8 7 6 5 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 Resource Group 8 7 6 5 4 3 2 1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms) 25

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 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 26 Measurement & Model-ing of Computer Systems, June 2010.

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

Logging information • Time stamp for browser operations – Overhead: <1% • Tcpdump – Overhead: <2% (CPU); <0.4% (MEM) 28

Results two take-away messages 29

IR operations do not matter much! Parsing, Style, Scripting, Layout, Painting 30

IR operations do not matter much Layout Style 4% 4% Overall Improvement Overall Improvement Non-mobile Web Non-mobile Web Mobile Web Mobile Web 2% 2% 0% 0% 0 8 16 24 32 0 8 16 24 32 Layout Calculating Speedup Style Formatting Speedup Script 4% Overall Improvement 2% Non-mobile Web Mobile Web 0% 0 8 16 24 32 Scripting Speedup 31

IR operations do not matter much Layout Style 4% 4% Overall Improvement Overall Improvement Non-mobile Web Non-mobile Web Mobile Web Mobile Web 2% 2% 0% 0% 0 8 16 24 32 0 8 16 24 32 Layout Calculating Speedup Style Formatting Speedup Script 4% Overall Improvement 2% Non-mobile Web Mobile Web 0% 0 8 16 24 32 Scripting Speedup 32

IR operations do not matter much Combined: Parsing, Layout, Style, Scripting, Painting, Glue 8% Overall Improvement 6% 4% Non-mobile Web 2% Mobile Web 0% 0 8 16 24 32 Speedup 33

Resource loading is the bottleneck! 34

Resource loading is the bottleneck Resource Loading 600% Overall Improvement 400% 200% Non-mobile Web Mobile Web 0% 0 8 16 24 32 Resource Loading Speedup 35

Resource loading is the bottleneck Resource Loading 600% Overall Improvement 400% 200% Non-mobile Web Mobile Web 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 Browser Delay (sec) 20 10 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 Browser Delay (sec) 20 10 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 Resource Group 8 New resources can only 7 be discovered after 6 parsing a loaded resource 5 4 3 2 1 0 1000 1500 2000 2500 3000 3500 4000 Elapsed time (ms) 40