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