5 myths of mobile web performance: selected slides

5 Myths Of Mobile Web PerformanceMichael MullanyCEO, Sencha

1

Velocity NYC 2013

Wednesday, October 23, 13

2

Amazing Apps WithWeb Technologies


3

First Framework for HTML5 MobileNow in version 2.3


APPLICATION

Sencha TouchTouch Interfaces

BROWSER ENGINES

UI: Templates + Controls + Containers

Foundation: OOP + MVC + RMI + Libraries

Data: Models + Stores + Connectors

JavaScriptHTML CSS

4

Canvas


Ford Dealer Showroom

5


Atlantic Wire Magazine

6


Smile Brands: Clinic Automation

7


8

“Sencha knows where all the browser engine bodies are buried”

Brendan EichCTO Mozilla


9

“I think that the biggest mistake that we made as a company was betting too much on HTML5 as opposed to native, because it just wasn't there. It's not that HTML5 is bad. I'm actually long-term really excited about it.” - Mark Zuckerberg

OCTOBER 2012


10

15 fps 60 fps

Hybrid


11

5 Myths About Performance


11

5 Myths About Performance1.Mobile web performance = JavaScript speed


11


2.Mobile web performance has improved only because of faster CPUs


11



3.Future, better CPU’s will not improve mobile web performance


11




4.Mobile browser software is already highly optimized


11




4.Mobile browser software is already highly optimized

5.Because they use a dynamic language with GC, JavaScript apps are condemned to poor performance in perpetuity.


TL;DRThese are not true

12


Myth 1“Mobile Web Performance = JavaScript Performance”

13


14

“How do I show a page

as fast as technically possible?”

vs.

“How do I get 60 fps in

post-loadexperience”

Web Site Web App


15

vs.

Web Site Web App


16

•Kb of transfer•# transfers•Blocking loads•CSS arrival order•CSS efficiency•JavaScript speed•Inline vs. linked•....

•JavaScript speed•DOM query•DOM modification•DOM traversal•CSS properties•CSS class add/remove•CSS transforms•CSS transitions’•Multi-‐animation perf•Canvas speed•SVG speed•GPU offload•Image decode

Pre-‐Load Post-‐Loadvs.One of many


16

•Kb of transfer•# transfers•Blocking loads•CSS arrival order•CSS efficiency•JavaScript speed•Inline vs. linked•....

•JavaScript speed•DOM query•DOM modification•DOM traversal•CSS properties•CSS class add/remove•CSS transforms•CSS transitions’•Multi-‐animation perf•Canvas speed•SVG speed•GPU offload•Image decode

Pre-‐Load Post-‐Loadvs.One of many

•Parallelism•Indexdb•localStorage•Time quality•etc.•etc.•etc.


Truth 1“Mobile Web Performance = JavaScript Performance + DOM access + CSS Transform fps + Canvas speed + ... ”

17


Myth 2 & 3“JavaScript has only gotten faster because of hardware improvements”

“Future better CPUs will not improve JavaScript performance”

18


Let’s look at JavaScript performance

Multiple iOS generations

Multiple iPhone generations

19


SunSpider Benchmarks

• Positives-‐ Began life as internal webkit tool

-‐ Wide availability of scores from many devices over many years

-‐ Reliably repeatable

-‐ Every browser has maxed out gaming the benchmark

-‐ Generally trusted

• Negatives -‐ Single threaded

-‐ Not very real world

-‐ Skewed toward date/time

-‐ Affected by power saving mode

-‐ Setup time vs. Run time

20


SunSpider Scores: iOS/iPhone

21

0

5,000

10,000

15,000

20,000

iOS 3 iOS 4 iOS 5 iOS 6 iOS 7

3GS44S55S


SunSpider Scores: iOS/iPhone

21

0

5,000

10,000

15,000

20,000


3GS44S55S

38x FASTER


SunSpider Scores (Log Scale)

22

100

1,000

10,000

100,000


3GS44S55S

Nitro!


iOS SunSpider: HW vs. SW

23

Every iPhone improves perf on

avg. by

54%

Every iOS version improves perf on

avg. by

38%

Hardware Software


Context: Ars Technica, June 2010

24

Source: Ars Technica, Sencha testing. Lower=better


Context: Ars Technica, June 2010

24

Source: Ars Technica, Sencha testing. Lower=better

iPhone 5S/iOS7 430


SunSpider Scores: Android

25

0

1,000

2,000

3,000

4,000

5,000

6,000

7,000

Captivate (2010) Droid Bionic (2011) Note 2 (2012) Galaxy S4 (2013)

Source: Sencha testing lower=better

2.2

2.3

4.1 4.2


“What about everything that’s not JavaScript?”

26


27


Dromaeo Core DOM Tests

28

Source: Sencha testing -‐ iPhone 3GS =1.00, higher = better, iOS 6.1



28

iPhone 3GS iPhone 4 iPhone 4S iPhone 50

2.0

4.0

6.0

8.0

10.0



29

http://flashcanvas.net/examples/dl.dropbox.com/u/1865210/mindcat/canvas_perf.html




Canvas Performance: iPhone

30

Source: MindCat Canvas Microbenchmarks, iOS 6.1, 3GS = 1.00


Canvas Performance: iPhone

30


2.0

4.0

6.0

8.0

10.0

Source: MindCat Canvas Microbenchmarks, iOS 6.1, 3GS = 1.00


Canvas Performance: Android

31

Source: Sencha Testing, Captivate = 1.00

2.2 2.3

4.1 4.2



31

Captivate (2010) Droid Bionic (2011) Note 2 (2012) Galaxy S4 (2013)0

2.0

4.0

6.0

8.0

10.0


2.2 2.3

4.1 4.2



31

Captivate (2010) Droid Bionic (2011) Note 2 (2012) Galaxy S4 (2013)0

2.0

4.0

6.0

8.0

10.0


GPU Acceleration!

2.2 2.3

4.1 4.2


32

http://bl.ocks.org/stepheneb/1296930




SVG 10k Segment Path Drawing

33

Source: Sencha testing, iOS 6.x, Safari 6 on Macbook Pro (Fall 2011). Lower=better

ms



33

iPhone 3GS iPhone 4 iPhone 4S iPhone 5 Safari 60

10,000

20,000

30,000

40,000

50,000

Source: Sencha testing, iOS 6.x, Safari 6 on Macbook Pro (Fall 2011). Lower=better

ms


34

http://themaninblue.com/experiment/AnimationBenchmark/svg/

500 Bouncing Balls




500 Bouncing Balls (FPS)

35

Source: Sencha testing, iOS 6.x

fps


500 Bouncing Balls (FPS)

35


10

20

30

40

50

Source: Sencha testing, iOS 6.x

fps


Truth 2 & 3“JavaScript has gotten faster because of hardware and software improvements”

“Future devices should keep improving both JavaScript and other parts of mobile web performance.”

36


Myth 4“The mobile web software stack is as optimized as it’s going to be”

37



38




38

iPhone 5 /iOS6 iOS7 Beta 1 iOS7.0.0 Surface RT/IE 100

1.0

2.0

3.0

4.0

5.0

6.0




39

Source: Sencha testing, iOS 6.x, Safari 6 on Macbook Pro (Fall 2011)

ms



39

iPhone 5/iOS6 Safari 6/Macbook Surface RT/IE10 iPhone 5/iOS70

3,000

6,000

9,000

12,000

15,000


ms



39

iPhone 5/iOS6 Safari 6/Macbook Surface RT/IE10 iPhone 5/iOS70

3,000

6,000

9,000

12,000

15,000


ms

200x faster


40

O(n)

O(1)


Truth 4“There remains lots of room for the mobile software stack to improve”

41


42

The Story So Far...


42

The Story So Far...1. JavaScript performance continues to increase rapidly


42


2.This performance increase is driven by both hardware and software improvements


42



3. Although this is a “good thing”, much of mobile web performance has nothing to do with JavaScript


42



3. Although this is a “good thing”, much of mobile web performance has nothing to do with JavaScript

4. Luckily, these other contributors are also improving: DOM interaction, Canvas and SVG among others.


Myth 5“JavaScript garbage collection means mobile web performance will always be slow”

43


JavaScript Garbage Collection

• Not a complete myth -‐ ∃ problems

-‐ GC pauses can stop the world

-‐ Glitchy animations

• Browser engines are improving-‐ Incremental GC: Chrome 17, Firefox 16, IE10

-‐ IE10: Separate memory spaces, FP allocation

-‐ Parallelism: Off-‐thread image decode (FF)

• And there are workarounds...-‐ DOM pooling & re-‐use

44

0

75

150

225

300

Pre-‐IC IC

Max GC Pause Chrome (ms)

0%

10%

20%

30%

IE9 IE10

% Execution Time Spent in GC


Truth 5“60 fps is hard on any platform. GC can be the least of your problems :)”

45


The Real Perf BottlenecksThe Making of Fastbook

46


47

15 fps 60 fps

Hybrid


Facebook Hybrid: Feed Problems

• Low fps, increasingly lower as content is scrolled-‐ New content simply appends to the DOM

• Navigating away from feed dumps state• Lots of unused content in network payload-‐ Wastes time parsing content that will never be used

• Everything on main thread

48


49

• DOM CRUD• Style calculation• Layout• Compositing• Painting• Network requests• Image decode• Data parsing

Browser Work Cycle

Every 16.7ms(60 fps)


49


Browser Work Cycle

Every 16.7ms(60 fps)

Hard Problem!!• Single thread (mostly)• Low power, sleepy CPU• Unpredictable scheduling• Garbage collection• Retina image processing• And more...


“Make All The Things Fast”

50


Schedule vs. display tasks using RAF ticks

Scrolling List Work Cycle

Preallocate, recycle, batch

Efficient CSS

DOM segmentation

CSS transforms

Scoped repaints


“Make All The Things Fast”

50


Schedule vs. display tasks using RAF ticks

Scrolling List Work Cycle

Preallocate, recycle, batch

Efficient CSS

DOM segmentation

CSS transforms

Scoped repaints Progressive vs. Buffered

Modes


51

http://vimeo.com/album/2541003/video/75397090




52

Remember These Things


1. “Mobile web performance = JavaScript performance + DOM access + CSS Transform fps + Canvas speed + ... ”

52




2. “JavaScript is getting faster because of hardware and software improvements”

52





3. “Future devices should improve both JavaScript and other parts of mobile web performance.”

52






4. “There is lots of room for the mobile software stack to improve”

52






4. “There is lots of room for the mobile software stack to improve”

5. “60 fps is hard on any platform. JavaScript GC can be the least of your problems :)”

52



Thank You michael aat sencha@mmullany

53


5 myths of mobile web performance: selected slides

Technology

truth1 mobilewebperformance

myth1 mobilewebperformance

preload kboftransfer

postload experiencevs

web siteweb apphow

web siteweb appvs

sencha velocitynyc20131

hybrid15 fps60 fps