Jankety Jank

Whistle stop tour of the rendering pipeline & app lifecycle.

Transcript

1. Jankety Jank
3. Jank?
4. Aalreet! means hello
5. ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
7. 100ms to 10s
8. Frame Budget 1000 / 60 = 16.6ish
9. The Rendering Pipeline Warning - browser internals are around the bend.
10. Renderer Process GPU Process
11. Renderer Process GPU Process Compositor Compositor Worker Thread/s Main Thread GPU Thread
13. Parsing Converting code to various tree structures
14. Tokeniser Parse Tree DOM Script Exe
15. “Scripts at the bottom”
16. html head meta link body p hello world DOM + CSSOM body font-size: 16px p display: none = Render Tree body
17. Layout Calculate position and size of nodes in tree.
19. Batched & Immediate Browser batches changes. Certain things force an immediate layout.
20. Tread Carefully Forced sync layout. Layout thrashing. http://bit.ly/1TbWsmx Batch operations. FastDOM
21. Paint
22. Two Step Process
23. Draw Calls
24. Rasterization
25. Compositing
26. Update Layer Tree Image Decode Major GC Evaluate Script Minor GC Timer Fired
27. Interval
28. Continous.
29. R.A.I.L
30. Example
31. Load - 1s
32. Idle - 50ms chunks
33. Animation - 16.6ms 8ms
34. You the compositor
35. Reduce Paint Areas will-change: transform, translateZ(0)
36. F.L.I.P bit.ly/1TJ4VAv
37. Response 100ms
38. e.preventDefault()
39. All weighted equally
40. Go Explore
41. Go Educate
42. Context is key
43. Thanks