Diagnosing UI Performance Issues

This presentation covers the basics of diagnosing UI performance issues and is based on https://speakerdeck.com/addyosmani/javascript-memory-management-masterclass

Transcript

1. DIAGNOSING UI PERFORMANCE ISSUES Thomas Anciaux | @thomaux
2. AGENDA What are performance issues? What is causing performance issues? How to diagnose performance issues?
3. What are performance issues?
4. What are performance issues? They are an experience of the user
5. What is this experience? The application is slow
6. What is this experience? The application is unresponsive
7. What is this experience? The application crashes
8. What is causing these issues? The UI runs in a single proces
9. What is causing these issues? JavaScript runs in a single proces
10. Anything not related to application execution will pause that execution
11. Garbage collection and HTML rendering will pause that execution
12. Garbage collection and HTML rendering will cause performance issues
13. How does garbage collection cause performance issues?
14. Garbage collection is slow
15. Garbage collection can take up milliseconds
16. Garbage collection executes when the memory pool is exhausted
17. Bad memory management causes the pool to exhaust more easily and frequently
18. Avoid bad memory management, by knowing the basics
19. Memory can be considered as a graph
21. Root
22. A node corresponds to an object or primitive
23. A node is located at a distance of the root
24. If all but a few objects of the same type are at the same distance, it could indicate a leak
25. Nodes have a retaining path
26. A node can be garbage collected if it is not reachable from the root
27. Nodes have a retaining size
28. Nodes have a retaining size
29. Nodes have a retaining size
30. A small object could retain a very large object
31. A small object could have a large retained size
32. Closures are a perfect example to demonstrate this
33. var a = function(){ var largeString = new Array(10000).join(“x”); var smallString = “x”; return function(){ return smallString; } } The large string will be retained in memory because it is part of the outer lexical scope of the returned function
34. How does HTML rendering cause performance issues?
35. Rendering HTML blocks JavaScript execution
36. Rendering HTML is done per frames
37. The longer it takes to render a frame, the longer JavaScript execution will be blocked
38. DOM interactions increase the time needed to construct the frame
39. Typically, a frame renders each 16ms (~60FPS)
40. If it takes longer to construct, the frame will be dropped
41. Dropping frames causes jank
42. Diagnosing Performance issues
43. How can we diagnose performance issues with the Chrome DevTools?
44. The Chrome DevTools offer different performance reporting tools
45. The Chrome DevTools offer timelines
46. A timeline can be used to record memory usage, #DOM nodes and #event listeners over time
47. Use timeline recordings to locate leaking patterns
48. The Chrome DevTools offer snapshots
49. Switch between views
50. Difference between yellow and red nodes?
51. The object at a yellow node has a reference in JavaScript
52. The object at a red node is detached, but referenced by a yellow node
53. The object at a red node is detached, but retained by a yellow node
54. Snapshots provide more detail about memory distribution
55. Use snapshots to locate retention
56. We used to profile with the 3-snapshot technique
57. 3-Snapshot Recipe 1. Start from a steady state 2. Take a snapshot 3. Perform action suspected of leaking 4. Take a snapshot 5. Repeat step 3 6. Take a snapshot
58. We expect memory allocated between the second and first snapshot to have been garbage collected
59. The Chrome DevTools offer the object allocation tracker
60. The object allocation tracker combines a timeline with snapshots
61. The object allocation tracker combines the best of both worlds
62. Thanks to the object allocation tracker we no longer have to perform the 3-snapshot technique manually
63. The Chrome DevTools offer allocation stack traces will V