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

Wednesday, October 23, 13

3

First  Framework  for  HTML5  MobileNow  in  version  2.3

Wednesday, October 23, 13

APPLICATION

Sencha TouchTouch Interfaces

BROWSER ENGINES

UI: Templates + Controls + Containers

Foundation: OOP + MVC + RMI + Libraries

Data: Models + Stores + Connectors

JavaScriptHTML CSS

4

Canvas

Wednesday, October 23, 13

Ford  Dealer  Showroom

5

Wednesday, October 23, 13

Atlantic  Wire  Magazine

6

Wednesday, October 23, 13

Smile  Brands:  Clinic  Automation

7

Wednesday, October 23, 13

8

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

Brendan  EichCTO  Mozilla

Wednesday, October 23, 13

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

Wednesday, October 23, 13

10

15 fps 60 fps

Hybrid

Wednesday, October 23, 13

11

5  Myths  About  Performance

Wednesday, October 23, 13

11

5  Myths  About  Performance1.Mobile  web  performance  =  JavaScript  speed

Wednesday, October 23, 13

11

5  Myths  About  Performance1.Mobile  web  performance  =  JavaScript  speed

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

Wednesday, October 23, 13

11

5  Myths  About  Performance1.Mobile  web  performance  =  JavaScript  speed

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

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

Wednesday, October 23, 13

11

5  Myths  About  Performance1.Mobile  web  performance  =  JavaScript  speed

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

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

4.Mobile  browser  software  is  already  highly  optimized

Wednesday, October 23, 13

11

5  Myths  About  Performance1.Mobile  web  performance  =  JavaScript  speed

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

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

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.

Wednesday, October 23, 13

TL;DRThese  are  not  true

12

Wednesday, October 23, 13

Myth  1“Mobile  Web  Performance  =  JavaScript  Performance”

13

Wednesday, October 23, 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

Wednesday, October 23, 13

15

vs.

Web Site Web App

Wednesday, October 23, 13

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

Wednesday, October 23, 13

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.

Wednesday, October 23, 13

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

17

Wednesday, October 23, 13

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

“Future  better  CPUs  will  not  improve  JavaScript  performance”

18

Wednesday, October 23, 13

Let’s  look  at  JavaScript  performance

 Multiple  iOS  generations  

Multiple  iPhone  generations

19

Wednesday, October 23, 13

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

Wednesday, October 23, 13

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

Wednesday, October 23, 13

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

38x  FASTER

Wednesday, October 23, 13

SunSpider  Scores  (Log  Scale)

22

100

1,000

10,000

100,000

iOS  3 iOS  4 iOS  5 iOS  6 iOS  7

3GS44S55S

Nitro!

Wednesday, October 23, 13

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

Wednesday, October 23, 13

Context:  Ars  Technica,  June  2010

24

Source:  Ars  Technica,  Sencha  testing.  Lower=better

Wednesday, October 23, 13

Context:  Ars  Technica,  June  2010

24

Source:  Ars  Technica,  Sencha  testing.  Lower=better

iPhone 5S/iOS7 430

Wednesday, October 23, 13

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

Wednesday, October 23, 13

“What  about  everything  that’s  not  JavaScript?”

26

Wednesday, October 23, 13

27

Wednesday, October 23, 13

27

Wednesday, October 23, 13

Dromaeo  Core  DOM  Tests

28

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

Wednesday, October 23, 13

Dromaeo  Core  DOM  Tests

28

iPhone  3GS iPhone  4 iPhone  4S iPhone  50

2.0

4.0

6.0

8.0

10.0

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

Wednesday, October 23, 13

29

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

Wednesday, October 23, 13

Canvas  Performance:  iPhone

30

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

Wednesday, October 23, 13

Canvas  Performance:  iPhone

30

iPhone  3GS iPhone  4 iPhone  4S iPhone  50

2.0

4.0

6.0

8.0

10.0

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

Wednesday, October 23, 13

Canvas  Performance:  Android

31

Source:  Sencha  Testing,  Captivate  =  1.00

2.2 2.3

4.1 4.2

Wednesday, October 23, 13

Canvas  Performance:  Android

31

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

2.0

4.0

6.0

8.0

10.0

Source:  Sencha  Testing,  Captivate  =  1.00

2.2 2.3

4.1 4.2

Wednesday, October 23, 13

Canvas  Performance:  Android

31

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

2.0

4.0

6.0

8.0

10.0

Source:  Sencha  Testing,  Captivate  =  1.00

GPU  Acceleration!

2.2 2.3

4.1 4.2

Wednesday, October 23, 13

32

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

Wednesday, October 23, 13

SVG  10k  Segment  Path  Drawing

33

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

ms

Wednesday, October 23, 13

SVG  10k  Segment  Path  Drawing

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

Wednesday, October 23, 13

SVG  10k  Segment  Path  Drawing

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

Wednesday, October 23, 13

34

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

500  Bouncing  Balls

Wednesday, October 23, 13

500  Bouncing  Balls  (FPS)

35

Source:  Sencha  testing,  iOS  6.x

fps

Wednesday, October 23, 13

500  Bouncing  Balls  (FPS)

35

iPhone  3GS iPhone  4 iPhone  4S iPhone  50

10

20

30

40

50

Source:  Sencha  testing,  iOS  6.x

fps

Wednesday, October 23, 13

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

Wednesday, October 23, 13

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

37

Wednesday, October 23, 13

Dromaeo  Core  DOM  Tests

38

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

Wednesday, October 23, 13

Dromaeo  Core  DOM  Tests

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

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

Wednesday, October 23, 13

Dromaeo  Core  DOM  Tests

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

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

Wednesday, October 23, 13

SVG  10k  Segment  Path  Drawing

39

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

ms

Wednesday, October 23, 13

SVG  10k  Segment  Path  Drawing

39

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

3,000

6,000

9,000

12,000

15,000

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

ms

Wednesday, October 23, 13

SVG  10k  Segment  Path  Drawing

39

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

3,000

6,000

9,000

12,000

15,000

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

ms

200x  faster

Wednesday, October 23, 13

40

O(n)

O(1)

Wednesday, October 23, 13

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

41

Wednesday, October 23, 13

42

The  Story  So  Far...

Wednesday, October 23, 13

42

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

Wednesday, October 23, 13

42

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

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

Wednesday, October 23, 13

42

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

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

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

Wednesday, October 23, 13

42

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

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

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.

Wednesday, October 23, 13

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

43

Wednesday, October 23, 13

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

Wednesday, October 23, 13

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

45

Wednesday, October 23, 13

The  Real  Perf  BottlenecksThe  Making  of  Fastbook

46

Wednesday, October 23, 13

47

15 fps 60 fps

Hybrid

Wednesday, October 23, 13

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

Wednesday, October 23, 13

49

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

Browser  Work  Cycle

Every  16.7ms(60  fps)

Wednesday, October 23, 13

49

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

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...

Wednesday, October 23, 13

“Make  All  The  Things  Fast”

50

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

Schedule  vs.  display  tasks  using  RAF  ticks

Scrolling  List  Work  Cycle

Preallocate,  recycle,  batch

Efficient  CSS

DOM  segmentation

CSS  transforms

Scoped  repaints

Wednesday, October 23, 13

“Make  All  The  Things  Fast”

50

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

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

Wednesday, October 23, 13

51

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

Wednesday, October 23, 13

52

Remember  These  Things

Wednesday, October 23, 13

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

52

Remember  These  Things

Wednesday, October 23, 13

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

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

52

Remember  These  Things

Wednesday, October 23, 13

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

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

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

52

Remember  These  Things

Wednesday, October 23, 13

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

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

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

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

52

Remember  These  Things

Wednesday, October 23, 13

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

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

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

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

Remember  These  Things

Wednesday, October 23, 13

Thank  You  michael  aat  sencha@mmullany

53

Wednesday, October 23, 13