1. Web App Performance

2. ▪ Rowan Beentje
▪ Chris Lord
▪ Pavel Feldman
▪ Shane O’Sullivan

3. Top Level Topic
▪ Scrolling Lists of Complex Data
▪ Stress test for all rendering platforms
▪ Forces us to solve everything else

4. Goal
▪ 60fps animation

5. Fallback Goal
▪ 30fps animation
▪ Reliably, no stuttering

6. Fallback Goal
▪ 30fps animation
▪ Reliably, no stuttering
▪ Often better than unreliable 60fps

7. What’s stopping us?
▪ Large DOM size
▪ When to create the DOM? Upfront? Lazily?
▪ Keep it small?

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. Measuring the DOM
▪ Changing content can make size change
▪ Must know size to inform layout
▪ But….

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

12. Keep it off the UI Thread?
▪ Do it on the server

13. So what works?
▪ Hide the scroll bar
▪ Measure when not busy
▪ Measure on the server

14. Repaints
▪ Images are unpredictable
▪ Load when you don’t want…
▪ With the wrong size….
▪ Have to be decoded

15. Dealing with Image Load
▪ Defer all image loading
▪ Use low res images
▪ Show images only when time left in an animation frame

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

17. Decoding JPEGs
▪ Large hit on UI thread
▪ Do it in a Worker?

18. GC

19. GC
Gremlin Carnage!!

20. GC
▪ Garbage Collection
▪ V8’s Incremental GC helps
▪ But not always
▪ And not everywhere
▪ Painstaking