Web App Performance
▪   Rowan Beentje▪   Chris Lord▪   Pavel Feldman▪   Shane O’Sullivan
Top Level Topic▪   Scrolling Lists of Complex Data    ▪   Stress test for all rendering platforms    ▪   Forces us to solv...
Goal▪   60fps animation
Fallback Goal▪   30fps animation    ▪   Reliably, no stuttering
Fallback Goal▪   30fps animation    ▪   Reliably, no stuttering    ▪   Often better than unreliable 60fps
What’s stopping us?▪   Large DOM size    ▪   When to create the DOM? Upfront? Lazily?    ▪   Keep it small?
Page Reflows▪   Keep DOM small === change it on the fly▪   Pool of reusable DOM structures for different types    ▪   E.g....
Measuring the DOM▪   Changing content can make size change▪   Must know size to inform layout▪   But….
Keep it off the UI Thread?▪   Possible on not-web▪   We don’t always have Workers▪   Workers on single CPU are slow▪   Wor...
Keep it off the UI Thread?▪   Do it on the server
So what works?▪   Hide the scroll bar▪   Measure when not busy▪   Measure on the server
Repaints▪   Images are unpredictable    ▪   Load when you don’t want…    ▪   With the wrong size….    ▪   Have to be decoded
Dealing with Image Load▪   Defer all image loading▪   Use low res images▪   Show images only when time left in an animatio...
One size fits no one▪   Not resizing is hard▪   Have a very strict layout▪   Only serve the right sizes    ▪   Helps to be...
Decoding JPEGs▪   Large hit on UI thread▪   Do it in a Worker?
GC
GC     Gremlin Carnage!!
GC▪   Garbage Collection    ▪   V8’s Incremental GC helps    ▪   But not always    ▪   And not everywhere▪   Painstaking
Edge conf   web perf
Upcoming SlideShare
Loading in …5
×

Edge conf web perf

3,219 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,219
On SlideShare
0
From Embeds
0
Number of Embeds
2,311
Actions
Shares
0
Downloads
2
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Edge conf web perf

  1. 1. Web App Performance
  2. 2. ▪ Rowan Beentje▪ Chris Lord▪ Pavel Feldman▪ Shane O’Sullivan
  3. 3. Top Level Topic▪ Scrolling Lists of Complex Data ▪ Stress test for all rendering platforms ▪ Forces us to solve everything else
  4. 4. Goal▪ 60fps animation
  5. 5. Fallback Goal▪ 30fps animation ▪ Reliably, no stuttering
  6. 6. Fallback Goal▪ 30fps animation ▪ Reliably, no stuttering ▪ Often better than unreliable 60fps
  7. 7. What’s stopping us?▪ Large DOM size ▪ When to create the DOM? Upfront? Lazily? ▪ Keep it small?
  8. 8. Page Reflows▪ Keep DOM small === change it on the fly▪ Pool of reusable DOM structures for different types ▪ E.g. with small image, large image, no image
  9. 9. Measuring the DOM▪ Changing content can make size change▪ Must know size to inform layout▪ But….
  10. 10. Keep it off the UI Thread?▪ Possible on not-web▪ We don’t always have Workers▪ Workers on single CPU are slow▪ Workers can’t do DOM anyway
  11. 11. Keep it off the UI Thread?▪ Do it on the server
  12. 12. So what works?▪ Hide the scroll bar▪ Measure when not busy▪ Measure on the server
  13. 13. Repaints▪ Images are unpredictable ▪ Load when you don’t want… ▪ With the wrong size…. ▪ Have to be decoded
  14. 14. Dealing with Image Load▪ Defer all image loading▪ Use low res images▪ Show images only when time left in an animation frame
  15. 15. One size fits no one▪ Not resizing is hard▪ Have a very strict layout▪ Only serve the right sizes ▪ Helps to be a large corporation, not for everyone▪ Get designers to calm down
  16. 16. Decoding JPEGs▪ Large hit on UI thread▪ Do it in a Worker?
  17. 17. GC
  18. 18. GC Gremlin Carnage!!
  19. 19. GC▪ Garbage Collection ▪ V8’s Incremental GC helps ▪ But not always ▪ And not everywhere▪ Painstaking

×