Successfully reported this slideshow.
5	
  Myths	
  Of	
  
Mobile	
  Web	
  Performance
Michael	
  Mullany
CEO,	
  Sencha
	
  Velocity	
  NYC	
  2013

1
Wednesd...
Amazing	
  Apps	
  With
Web	
  Technologies

2
Wednesday, October 23, 13
First	
  Framework	
  for	
  HTML5	
  Mobile
Now	
  in	
  version	
  2.3
3
Wednesday, October 23, 13
APPLICATION

UI: Templates + Controls + Containers
Data: Models + Stores + Connectors
Foundation: OOP + MVC + RMI + Librar...
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
“Sencha knows where all the
browser engine bodies are buried”
Brendan	
  Eich
CTO	
  Mozilla

8
Wednesday, October 23, 13
OCTOBER	
  2012

“I think that the biggest mistake that we made as a company was
betting too much on HTML5 as opposed to n...
Hybrid

15 fps

60 fps
10

Wednesday, October 23, 13
5	
  Myths	
  About	
  Performance

11
Wednesday, October 23, 13
5	
  Myths	
  About	
  Performance
1.Mobile	
  web	
  performance	
  =	
  JavaScript	
  speed

11
Wednesday, October 23, 1...
5	
  Myths	
  About	
  Performance
1.Mobile	
  web	
  performance	
  =	
  JavaScript	
  speed
2.Mobile	
  web	
  performan...
5	
  Myths	
  About	
  Performance
1.Mobile	
  web	
  performance	
  =	
  JavaScript	
  speed
2.Mobile	
  web	
  performan...
5	
  Myths	
  About	
  Performance
1.Mobile	
  web	
  performance	
  =	
  JavaScript	
  speed
2.Mobile	
  web	
  performan...
5	
  Myths	
  About	
  Performance
1.Mobile	
  web	
  performance	
  =	
  JavaScript	
  speed
2.Mobile	
  web	
  performan...
TL;DR
These	
  are	
  not	
  true

12
Wednesday, October 23, 13
Myth	
  1
“Mobile	
  Web	
  Performance	
  =	
  JavaScript	
  Performance”

13
Wednesday, October 23, 13
Web Site

Web App

“How do I
show a page
as fast as
technically
possible?”

“How do I
get 60 fps in
post-load
experience”
...
Web Site

Web App

vs.

15
Wednesday, October 23, 13
Pre-­‐Load
•Kb	
  of	
  transfer
•#	
  transfers
•Blocking	
  loads
•CSS	
  arrival	
  order
•CSS	
  efficiency
•JavaScript	...
Pre-­‐Load
•Kb	
  of	
  transfer
•#	
  transfers
•Blocking	
  loads
•CSS	
  arrival	
  order
•CSS	
  efficiency
•JavaScript	...
Truth	
  1
“Mobile	
  Web	
  Performance	
  =	
  JavaScript	
  Performance	
  
+	
  DOM	
  access	
  +	
  CSS	
  Transform...
Myth	
  2	
  &	
  3
“JavaScript	
  has	
  only	
  gotten	
  faster	
  because	
  of	
  
hardware	
  improvements”
“Future	...
Let’s	
  look	
  at	
  JavaScript	
  performance
	
  
Multiple	
  iOS	
  generations	
  
Multiple	
  iPhone	
  generations...
SunSpider	
  Benchmarks
•

Positives

-­‐ Began	
  life	
  as	
  internal	
  webkit	
  tool
-­‐ Wide	
  availability	
  of...
SunSpider	
  Scores:	
  iOS/iPhone
20,000
15,000

3GS
4
4S
5
5S

10,000
5,000
0
iOS	
  3

iOS	
  4

iOS	
  5

iOS	
  6

iO...
SunSpider	
  Scores:	
  iOS/iPhone
20,000

38x	
  FASTER

15,000
10,000

3GS
4
4S
5
5S

5,000
0
iOS	
  3

iOS	
  4

iOS	
 ...
SunSpider	
  Scores	
  (Log	
  Scale)
100,000

Nitro!
3GS
4
4S
5
5S

10,000

1,000

100
iOS	
  3

iOS	
  4

iOS	
  5

iOS	...
iOS	
  SunSpider:	
  HW	
  vs.	
  SW
Hardware

Software

Every	
  iPhone	
  
improves	
  perf	
  on	
  
avg.	
  by

Every	...
Context:	
  Ars	
  Technica,	
  June	
  2010

Source:	
  Ars	
  Technica,	
  Sencha	
  testing.	
  Lower=better
24
Wednesd...
Context:	
  Ars	
  Technica,	
  June	
  2010

iPhone 5S/iOS7

430

Source:	
  Ars	
  Technica,	
  Sencha	
  testing.	
  Lo...
SunSpider	
  Scores:	
  Android
7,000

2.2

6,000
5,000
4,000
3,000

2.3

2,000

4.1

1,000
0

Captivate	
  (2010)

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

Source:	
  Sencha	
  testing	
  -­‐	
  iPhone	
  3GS	
  =1.00,	
  higher	
  =	
  better,	...
Dromaeo	
  Core	
  DOM	
  Tests
10.0
8.0
6.0
4.0
2.0
0

iPhone	
  3GS

iPhone	
  4

iPhone	
  4S

iPhone	
  5

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

29
Wednesday, October 23, 13
Canvas	
  Performance:	
  iPhone

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

30
...
Canvas	
  Performance:	
  iPhone
10.0
8.0
6.0
4.0
2.0
0

iPhone	
  3GS

iPhone	
  4

iPhone	
  4S

iPhone	
  5

Source:	
 ...
Canvas	
  Performance:	
  Android

4.1
2.2

4.2

2.3

Source:	
  Sencha	
  Testing,	
  Captivate	
  =	
  1.00

31
Wednesda...
Canvas	
  Performance:	
  Android
10.0
8.0
6.0

4.1

4.0
2.0
0

2.2

4.2

2.3

Captivate	
  (2010) Droid	
  Bionic	
  (201...
Canvas	
  Performance:	
  Android
10.0
8.0

GPU	
  Acceleration!

6.0

4.1

4.0
2.0
0

2.2

4.2

2.3

Captivate	
  (2010) ...
http://bl.ocks.org/stepheneb/1296930
32
Wednesday, October 23, 13
SVG	
  10k	
  Segment	
  Path	
  Drawing

ms

Source:	
  Sencha	
  testing,	
  iOS	
  6.x,	
  Safari	
  6	
  on	
  Macbook...
SVG	
  10k	
  Segment	
  Path	
  Drawing
50,000
40,000

ms 30,000
20,000
10,000
0

iPhone	
  3GS

iPhone	
  4

iPhone	
  4...
SVG	
  10k	
  Segment	
  Path	
  Drawing
50,000
40,000

ms 30,000
20,000
10,000
0

iPhone	
  3GS

iPhone	
  4

iPhone	
  4...
500	
  Bouncing	
  Balls

http://themaninblue.com/experiment/AnimationBenchmark/svg/
34
Wednesday, October 23, 13
500	
  Bouncing	
  Balls	
  (FPS)

fps

Source:	
  Sencha	
  testing,	
  iOS	
  6.x

35
Wednesday, October 23, 13
500	
  Bouncing	
  Balls	
  (FPS)
50
40

fps

30
20
10
0

iPhone	
  3GS

iPhone	
  4

iPhone	
  4S

iPhone	
  5

Source:	
...
Truth	
  2	
  &	
  3
“JavaScript	
  has	
  gotten	
  faster	
  because	
  of	
  hardware	
  
and	
  software	
  improvemen...
Myth	
  4
“The	
  mobile	
  web	
  software	
  stack	
  is	
  as	
  optimized	
  as	
  it’s	
  
going	
  to	
  be”

37
Wed...
Dromaeo	
  Core	
  DOM	
  Tests

Source:	
  Sencha	
  testing	
  -­‐	
  iPhone	
  3GS	
  =1.00,	
  higher	
  =	
  better,	...
Dromaeo	
  Core	
  DOM	
  Tests
6.0
5.0
4.0
3.0
2.0
1.0
0

iPhone	
  5	
  /iOS6

iOS7	
  Beta	
  1

iOS7.0.0

Surface	
  R...
Dromaeo	
  Core	
  DOM	
  Tests
6.0
5.0
4.0
3.0
2.0
1.0
0

iPhone	
  5	
  /iOS6

iOS7	
  Beta	
  1

iOS7.0.0

Surface	
  R...
SVG	
  10k	
  Segment	
  Path	
  Drawing

ms

Source:	
  Sencha	
  testing,	
  iOS	
  6.x,	
  Safari	
  6	
  on	
  Macbook...
SVG	
  10k	
  Segment	
  Path	
  Drawing
15,000
12,000

ms

9,000
6,000
3,000
0

iPhone	
  5/iOS6

Safari	
  6/Macbook

Su...
SVG	
  10k	
  Segment	
  Path	
  Drawing
15,000
12,000

ms

200x	
  faster

9,000
6,000
3,000
0

iPhone	
  5/iOS6

Safari	...
O(n)
O(1)

40
Wednesday, October 23, 13
Truth	
  4
“There	
  remains	
  lots	
  of	
  room	
  for	
  the	
  mobile	
  software	
  
stack	
  to	
  improve”

41
Wed...
The	
  Story	
  So	
  Far...

42
Wednesday, October 23, 13
The	
  Story	
  So	
  Far...
1.	
  JavaScript	
  performance	
  continues	
  to	
  increase	
  rapidly

42
Wednesday, Octo...
The	
  Story	
  So	
  Far...
1.	
  JavaScript	
  performance	
  continues	
  to	
  increase	
  rapidly
2.This	
  performan...
The	
  Story	
  So	
  Far...
1.	
  JavaScript	
  performance	
  continues	
  to	
  increase	
  rapidly
2.This	
  performan...
The	
  Story	
  So	
  Far...
1.	
  JavaScript	
  performance	
  continues	
  to	
  increase	
  rapidly
2.This	
  performan...
Myth	
  5
“JavaScript	
  garbage	
  collection	
  means	
  mobile	
  web	
  
performance	
  will	
  always	
  be	
  slow”
...
JavaScript	
  Garbage	
  Collection
•

•

•

Max	
  GC	
  Pause	
  Chrome	
  (ms)

Not	
  a	
  complete	
  myth	
  -­‐	
  ...
Truth	
  5
“60	
  fps	
  is	
  hard	
  on	
  any	
  platform.	
  GC	
  can	
  be	
  the	
  least	
  
of	
  your	
  problem...
The	
  Real	
  Perf	
  Bottlenecks
The	
  Making	
  of	
  Fastbook

46
Wednesday, October 23, 13
Hybrid

15 fps

60 fps
47

Wednesday, October 23, 13
Facebook	
  Hybrid:	
  Feed	
  Problems
•
•
•
•

Low	
  fps,	
  increasingly	
  lower	
  as	
  content	
  is	
  scrolled

...
Browser	
  Work	
  Cycle
•

DOM	
  CRUD

•

Style	
  calculation

•

Layout

•

Compositing

•

Painting

•

Network	
  re...
Browser	
  Work	
  Cycle
•

DOM	
  CRUD

•

Style	
  calculation

•

Layout

Every	
  16.7ms
(60	
  fps)

•

Compositing

...
Scrolling	
  List	
  Work	
  Cycle
•

DOM	
  CRUD

Preallocate,	
  recycle,	
  batch

•

Style	
  calculation

Efficient	
  ...
Scrolling	
  List	
  Work	
  Cycle
•

DOM	
  CRUD

Preallocate,	
  recycle,	
  batch

•

Style	
  calculation

Efficient	
  ...
http://vimeo.com/album/2541003/video/75397090
51
Wednesday, October 23, 13
Remember	
  These	
  Things

52
Wednesday, October 23, 13
Remember	
  These	
  Things
1. “Mobile	
  web	
  performance	
  =	
  JavaScript	
  performance	
  +	
  DOM	
  access	
  
+...
Remember	
  These	
  Things
1. “Mobile	
  web	
  performance	
  =	
  JavaScript	
  performance	
  +	
  DOM	
  access	
  
+...
Remember	
  These	
  Things
1. “Mobile	
  web	
  performance	
  =	
  JavaScript	
  performance	
  +	
  DOM	
  access	
  
+...
Remember	
  These	
  Things
1. “Mobile	
  web	
  performance	
  =	
  JavaScript	
  performance	
  +	
  DOM	
  access	
  
+...
Remember	
  These	
  Things
1. “Mobile	
  web	
  performance	
  =	
  JavaScript	
  performance	
  +	
  DOM	
  access	
  
+...
Thank	
  You	
  
michael	
  aat	
  sencha
@mmullany

53
Wednesday, October 23, 13
Upcoming SlideShare
Loading in …5
×

5 Myths of Mobile Web Performance: Selected Slides

2,760 views

Published on

Presentation delivered at Velocity Conf 2013 about myths of mobile web performance.

Published in: Technology

5 Myths of Mobile Web Performance: Selected Slides

  1. 1. 5  Myths  Of   Mobile  Web  Performance Michael  Mullany CEO,  Sencha  Velocity  NYC  2013 1 Wednesday, October 23, 13
  2. 2. Amazing  Apps  With Web  Technologies 2 Wednesday, October 23, 13
  3. 3. First  Framework  for  HTML5  Mobile Now  in  version  2.3 3 Wednesday, October 23, 13
  4. 4. APPLICATION UI: Templates + Controls + Containers Data: Models + Stores + Connectors Foundation: OOP + MVC + RMI + Libraries Sencha Touch Touch Interfaces BROWSER ENGINES HTML JavaScript CSS Canvas 4 Wednesday, October 23, 13
  5. 5. Ford  Dealer  Showroom 5 Wednesday, October 23, 13
  6. 6. Atlantic  Wire  Magazine 6 Wednesday, October 23, 13
  7. 7. Smile  Brands:  Clinic  Automation 7 Wednesday, October 23, 13
  8. 8. “Sencha knows where all the browser engine bodies are buried” Brendan  Eich CTO  Mozilla 8 Wednesday, October 23, 13
  9. 9. OCTOBER  2012 “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 9 Wednesday, October 23, 13
  10. 10. Hybrid 15 fps 60 fps 10 Wednesday, October 23, 13
  11. 11. 5  Myths  About  Performance 11 Wednesday, October 23, 13
  12. 12. 5  Myths  About  Performance 1.Mobile  web  performance  =  JavaScript  speed 11 Wednesday, October 23, 13
  13. 13. 5  Myths  About  Performance 1.Mobile  web  performance  =  JavaScript  speed 2.Mobile  web  performance  has  improved  only  because  of   faster  CPUs 11 Wednesday, October 23, 13
  14. 14. 5  Myths  About  Performance 1.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 11 Wednesday, October 23, 13
  15. 15. 5  Myths  About  Performance 1.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 11 Wednesday, October 23, 13
  16. 16. 5  Myths  About  Performance 1.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. 11 Wednesday, October 23, 13
  17. 17. TL;DR These  are  not  true 12 Wednesday, October 23, 13
  18. 18. Myth  1 “Mobile  Web  Performance  =  JavaScript  Performance” 13 Wednesday, October 23, 13
  19. 19. Web Site Web App “How do I show a page as fast as technically possible?” “How do I get 60 fps in post-load experience” vs. 14 Wednesday, October 23, 13
  20. 20. Web Site Web App vs. 15 Wednesday, October 23, 13
  21. 21. Pre-­‐Load •Kb  of  transfer •#  transfers •Blocking  loads •CSS  arrival  order •CSS  efficiency •JavaScript  speed •Inline  vs.  linked •.... vs. Post-­‐Load •JavaScript  speed One  of  many •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 16 Wednesday, October 23, 13
  22. 22. Pre-­‐Load •Kb  of  transfer •#  transfers •Blocking  loads •CSS  arrival  order •CSS  efficiency •JavaScript  speed •Inline  vs.  linked •.... Wednesday, October 23, 13 vs. Post-­‐Load •JavaScript  speed One  of  many •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 •Parallelism •Indexdb •localStorage •Time  quality •etc. •etc. •etc. 16
  23. 23. Truth  1 “Mobile  Web  Performance  =  JavaScript  Performance   +  DOM  access  +  CSS  Transform  fps  +  Canvas  speed   +  ...  ” 17 Wednesday, October 23, 13
  24. 24. 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
  25. 25. Let’s  look  at  JavaScript  performance   Multiple  iOS  generations   Multiple  iPhone  generations 19 Wednesday, October 23, 13
  26. 26. 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 • Negatives   -­‐ -­‐ -­‐ -­‐ -­‐ Single  threaded Not  very  real  world Skewed  toward  date/time Affected  by  power  saving  mode Setup  time  vs.  Run  time -­‐ Generally  trusted 20 Wednesday, October 23, 13
  27. 27. SunSpider  Scores:  iOS/iPhone 20,000 15,000 3GS 4 4S 5 5S 10,000 5,000 0 iOS  3 iOS  4 iOS  5 iOS  6 iOS  7 21 Wednesday, October 23, 13
  28. 28. SunSpider  Scores:  iOS/iPhone 20,000 38x  FASTER 15,000 10,000 3GS 4 4S 5 5S 5,000 0 iOS  3 iOS  4 iOS  5 iOS  6 iOS  7 21 Wednesday, October 23, 13
  29. 29. SunSpider  Scores  (Log  Scale) 100,000 Nitro! 3GS 4 4S 5 5S 10,000 1,000 100 iOS  3 iOS  4 iOS  5 iOS  6 iOS  7 22 Wednesday, October 23, 13
  30. 30. iOS  SunSpider:  HW  vs.  SW Hardware Software Every  iPhone   improves  perf  on   avg.  by Every  iOS  version   improves  perf  on   avg.  by 54% 38% 23 Wednesday, October 23, 13
  31. 31. Context:  Ars  Technica,  June  2010 Source:  Ars  Technica,  Sencha  testing.  Lower=better 24 Wednesday, October 23, 13
  32. 32. Context:  Ars  Technica,  June  2010 iPhone 5S/iOS7 430 Source:  Ars  Technica,  Sencha  testing.  Lower=better 24 Wednesday, October 23, 13
  33. 33. SunSpider  Scores:  Android 7,000 2.2 6,000 5,000 4,000 3,000 2.3 2,000 4.1 1,000 0 Captivate  (2010) Droid  Bionic  (2011) Note  2  (2012) 4.2 Galaxy  S4  (2013) Source:  Sencha  testing  lower=better 25 Wednesday, October 23, 13
  34. 34. “What  about   everything  that’s   not  JavaScript?” 26 Wednesday, October 23, 13
  35. 35. 27 Wednesday, October 23, 13
  36. 36. 27 Wednesday, October 23, 13
  37. 37. Dromaeo  Core  DOM  Tests Source:  Sencha  testing  -­‐  iPhone  3GS  =1.00,  higher  =  better,  iOS  6.1 28 Wednesday, October 23, 13
  38. 38. Dromaeo  Core  DOM  Tests 10.0 8.0 6.0 4.0 2.0 0 iPhone  3GS iPhone  4 iPhone  4S iPhone  5 Source:  Sencha  testing  -­‐  iPhone  3GS  =1.00,  higher  =  better,  iOS  6.1 28 Wednesday, October 23, 13
  39. 39. http://flashcanvas.net/examples/dl.dropbox.com/u/1865210/mindcat/canvas_perf.html 29 Wednesday, October 23, 13
  40. 40. Canvas  Performance:  iPhone Source:  MindCat  Canvas  Microbenchmarks,  iOS  6.1,  3GS  =  1.00 30 Wednesday, October 23, 13
  41. 41. Canvas  Performance:  iPhone 10.0 8.0 6.0 4.0 2.0 0 iPhone  3GS iPhone  4 iPhone  4S iPhone  5 Source:  MindCat  Canvas  Microbenchmarks,  iOS  6.1,  3GS  =  1.00 30 Wednesday, October 23, 13
  42. 42. Canvas  Performance:  Android 4.1 2.2 4.2 2.3 Source:  Sencha  Testing,  Captivate  =  1.00 31 Wednesday, October 23, 13
  43. 43. Canvas  Performance:  Android 10.0 8.0 6.0 4.1 4.0 2.0 0 2.2 4.2 2.3 Captivate  (2010) Droid  Bionic  (2011) Note  2  (2012) Galaxy  S4  (2013) Source:  Sencha  Testing,  Captivate  =  1.00 31 Wednesday, October 23, 13
  44. 44. Canvas  Performance:  Android 10.0 8.0 GPU  Acceleration! 6.0 4.1 4.0 2.0 0 2.2 4.2 2.3 Captivate  (2010) Droid  Bionic  (2011) Note  2  (2012) Galaxy  S4  (2013) Source:  Sencha  Testing,  Captivate  =  1.00 31 Wednesday, October 23, 13
  45. 45. http://bl.ocks.org/stepheneb/1296930 32 Wednesday, October 23, 13
  46. 46. SVG  10k  Segment  Path  Drawing ms Source:  Sencha  testing,  iOS  6.x,  Safari  6  on  Macbook  Pro  (Fall  2011).  Lower=better 33 Wednesday, October 23, 13
  47. 47. SVG  10k  Segment  Path  Drawing 50,000 40,000 ms 30,000 20,000 10,000 0 iPhone  3GS iPhone  4 iPhone  4S iPhone  5 Safari  6 Source:  Sencha  testing,  iOS  6.x,  Safari  6  on  Macbook  Pro  (Fall  2011).  Lower=better 33 Wednesday, October 23, 13
  48. 48. SVG  10k  Segment  Path  Drawing 50,000 40,000 ms 30,000 20,000 10,000 0 iPhone  3GS iPhone  4 iPhone  4S iPhone  5 Safari  6 Source:  Sencha  testing,  iOS  6.x,  Safari  6  on  Macbook  Pro  (Fall  2011).  Lower=better 33 Wednesday, October 23, 13
  49. 49. 500  Bouncing  Balls http://themaninblue.com/experiment/AnimationBenchmark/svg/ 34 Wednesday, October 23, 13
  50. 50. 500  Bouncing  Balls  (FPS) fps Source:  Sencha  testing,  iOS  6.x 35 Wednesday, October 23, 13
  51. 51. 500  Bouncing  Balls  (FPS) 50 40 fps 30 20 10 0 iPhone  3GS iPhone  4 iPhone  4S iPhone  5 Source:  Sencha  testing,  iOS  6.x 35 Wednesday, October 23, 13
  52. 52. 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
  53. 53. Myth  4 “The  mobile  web  software  stack  is  as  optimized  as  it’s   going  to  be” 37 Wednesday, October 23, 13
  54. 54. Dromaeo  Core  DOM  Tests Source:  Sencha  testing  -­‐  iPhone  3GS  =1.00,  higher  =  better,  iOS  6.1 38 Wednesday, October 23, 13
  55. 55. Dromaeo  Core  DOM  Tests 6.0 5.0 4.0 3.0 2.0 1.0 0 iPhone  5  /iOS6 iOS7  Beta  1 iOS7.0.0 Surface  RT/IE  10 Source:  Sencha  testing  -­‐  iPhone  3GS  =1.00,  higher  =  better,  iOS  6.1 38 Wednesday, October 23, 13
  56. 56. Dromaeo  Core  DOM  Tests 6.0 5.0 4.0 3.0 2.0 1.0 0 iPhone  5  /iOS6 iOS7  Beta  1 iOS7.0.0 Surface  RT/IE  10 Source:  Sencha  testing  -­‐  iPhone  3GS  =1.00,  higher  =  better,  iOS  6.1 38 Wednesday, October 23, 13
  57. 57. SVG  10k  Segment  Path  Drawing ms Source:  Sencha  testing,  iOS  6.x,  Safari  6  on  Macbook  Pro  (Fall  2011) 39 Wednesday, October 23, 13
  58. 58. SVG  10k  Segment  Path  Drawing 15,000 12,000 ms 9,000 6,000 3,000 0 iPhone  5/iOS6 Safari  6/Macbook Surface  RT/IE10 iPhone  5/iOS7 Source:  Sencha  testing,  iOS  6.x,  Safari  6  on  Macbook  Pro  (Fall  2011) 39 Wednesday, October 23, 13
  59. 59. SVG  10k  Segment  Path  Drawing 15,000 12,000 ms 200x  faster 9,000 6,000 3,000 0 iPhone  5/iOS6 Safari  6/Macbook Surface  RT/IE10 iPhone  5/iOS7 Source:  Sencha  testing,  iOS  6.x,  Safari  6  on  Macbook  Pro  (Fall  2011) 39 Wednesday, October 23, 13
  60. 60. O(n) O(1) 40 Wednesday, October 23, 13
  61. 61. Truth  4 “There  remains  lots  of  room  for  the  mobile  software   stack  to  improve” 41 Wednesday, October 23, 13
  62. 62. The  Story  So  Far... 42 Wednesday, October 23, 13
  63. 63. The  Story  So  Far... 1.  JavaScript  performance  continues  to  increase  rapidly 42 Wednesday, October 23, 13
  64. 64. The  Story  So  Far... 1.  JavaScript  performance  continues  to  increase  rapidly 2.This  performance  increase  is  driven  by  both  hardware  and   software  improvements 42 Wednesday, October 23, 13
  65. 65. 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 42 Wednesday, October 23, 13
  66. 66. 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. 42 Wednesday, October 23, 13
  67. 67. Myth  5 “JavaScript  garbage  collection  means  mobile  web   performance  will  always  be  slow” 43 Wednesday, October 23, 13
  68. 68. JavaScript  Garbage  Collection • • • Max  GC  Pause  Chrome  (ms) Not  a  complete  myth  -­‐  ∃  problems 300 -­‐ 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 225 150 75 0 Pre-­‐IC IC %  Execution  Time  Spent  in  GC 30% 20% 10% 0% IE9 IE10 44 Wednesday, October 23, 13
  69. 69. Truth  5 “60  fps  is  hard  on  any  platform.  GC  can  be  the  least   of  your  problems  :)” 45 Wednesday, October 23, 13
  70. 70. The  Real  Perf  Bottlenecks The  Making  of  Fastbook 46 Wednesday, October 23, 13
  71. 71. Hybrid 15 fps 60 fps 47 Wednesday, October 23, 13
  72. 72. 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
  73. 73. Browser  Work  Cycle • DOM  CRUD • Style  calculation • Layout • Compositing • Painting • Network  requests • Image  decode • Data  parsing Every  16.7ms (60  fps) 49 Wednesday, October 23, 13
  74. 74. Browser  Work  Cycle • DOM  CRUD • Style  calculation • Layout Every  16.7ms (60  fps) • Compositing • Painting Hard  Problem!! • Network  requests • Image  decode • Data  parsing •  Single  thread  (mostly) •  Low  power,  sleepy  CPU •  Unpredictable  scheduling •  Garbage  collection •  Retina  image  processing •  And  more... 49 Wednesday, October 23, 13
  75. 75. Scrolling  List  Work  Cycle • DOM  CRUD Preallocate,  recycle,  batch • Style  calculation Efficient  CSS • Layout DOM  segmentation • Compositing CSS  transforms • Painting Scoped  repaints • Network  requests • Image  decode • Data  parsing Schedule  vs.  display   tasks  using  RAF  ticks “Make  All  The  Things  Fast” 50 Wednesday, October 23, 13
  76. 76. Scrolling  List  Work  Cycle • DOM  CRUD Preallocate,  recycle,  batch • Style  calculation Efficient  CSS • Layout DOM  segmentation • Compositing CSS  transforms • Painting Scoped  repaints • Network  requests • Image  decode • Data  parsing Progressive   vs.  Buffered   Modes Schedule  vs.  display   tasks  using  RAF  ticks “Make  All  The  Things  Fast” 50 Wednesday, October 23, 13
  77. 77. http://vimeo.com/album/2541003/video/75397090 51 Wednesday, October 23, 13
  78. 78. Remember  These  Things 52 Wednesday, October 23, 13
  79. 79. Remember  These  Things 1. “Mobile  web  performance  =  JavaScript  performance  +  DOM  access   +  CSS  Transform  fps  +  Canvas  speed  +  ...  ” 52 Wednesday, October 23, 13
  80. 80. Remember  These  Things 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 Wednesday, October 23, 13
  81. 81. Remember  These  Things 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 Wednesday, October 23, 13
  82. 82. Remember  These  Things 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 Wednesday, October 23, 13
  83. 83. Remember  These  Things 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 Wednesday, October 23, 13
  84. 84. Thank  You   michael  aat  sencha @mmullany 53 Wednesday, October 23, 13

×