Diagnosing UI Performance Issues

Slide 1

Slide 1 text

DIAGNOSING UI PERFORMANCE ISSUES Thomas Anciaux | @thomaux

Slide 2

Slide 2 text

AGENDA What are performance issues? What is causing performance issues? How to diagnose performance issues?

Slide 3

Slide 3 text

What are performance issues?

Slide 4

Slide 4 text

What are performance issues? They are an experience of the user

Slide 5

Slide 5 text

What is this experience? The application is slow

Slide 6

Slide 6 text

What is this experience? The application is unresponsive

Slide 7

Slide 7 text

What is this experience? The application crashes

Slide 8

Slide 8 text

What is causing these issues? The UI runs in a single proces

Slide 9

Slide 9 text

What is causing these issues? JavaScript runs in a single proces

Slide 10

Slide 10 text

Anything not related to application execution will pause that execution

Slide 11

Slide 11 text

Garbage collection and HTML rendering will pause that execution

Slide 12

Slide 12 text

Garbage collection and HTML rendering will cause performance issues

Slide 13

Slide 13 text

How does garbage collection cause performance issues?

Slide 14

Slide 14 text

Garbage collection is slow

Slide 15

Slide 15 text

Garbage collection can take up milliseconds

Slide 16

Slide 16 text

Garbage collection executes when the memory pool is exhausted

Slide 17

Slide 17 text

Bad memory management causes the pool to exhaust more easily and frequently

Slide 18

Slide 18 text

Avoid bad memory management, by knowing the basics

Slide 19

Slide 19 text

Memory can be considered as a graph

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Root

Slide 22

Slide 22 text

A node corresponds to an object or primitive

Slide 23

Slide 23 text

A node is located at a distance of the root

Slide 24

Slide 24 text

If all but a few objects of the same type are at the same distance, it could indicate a leak

Slide 25

Slide 25 text

Nodes have a retaining path

Slide 26

Slide 26 text

A node can be garbage collected if it is not reachable from the root

Slide 27

Slide 27 text

Nodes have a retaining size

Slide 28

Slide 28 text

Nodes have a retaining size

Slide 29

Slide 29 text

Nodes have a retaining size

Slide 30

Slide 30 text

A small object could retain a very large object

Slide 31

Slide 31 text

A small object could have a large retained size

Slide 32

Slide 32 text

Closures are a perfect example to demonstrate this

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

How does HTML rendering cause performance issues?

Slide 35

Slide 35 text

Rendering HTML blocks JavaScript execution

Slide 36

Slide 36 text

Rendering HTML is done per frames

Slide 37

Slide 37 text

The longer it takes to render a frame, the longer JavaScript execution will be blocked

Slide 38

Slide 38 text

DOM interactions increase the time needed to construct the frame

Slide 39

Slide 39 text

Typically, a frame renders each 16ms (~60FPS)

Slide 40

Slide 40 text

If it takes longer to construct, the frame will be dropped

Slide 41

Slide 41 text

Dropping frames causes jank

Slide 42

Slide 42 text

Diagnosing Performance issues

Slide 43

Slide 43 text

How can we diagnose performance issues with the Chrome DevTools?

Slide 44

Slide 44 text

The Chrome DevTools offer different performance reporting tools

Slide 45

Slide 45 text

The Chrome DevTools offer timelines

Slide 46

Slide 46 text

A timeline can be used to record memory usage, #DOM nodes and #event listeners over time

Slide 47

Slide 47 text

Use timeline recordings to locate leaking patterns

Slide 48

Slide 48 text

The Chrome DevTools offer snapshots

Slide 49

Slide 49 text

Switch between views

Slide 50

Slide 50 text

Difference between yellow and red nodes?

Slide 51

Slide 51 text

The object at a yellow node has a reference in JavaScript

Slide 52

Slide 52 text

The object at a red node is detached, but referenced by a yellow node

Slide 53

Slide 53 text

The object at a red node is detached, but retained by a yellow node

Slide 54

Slide 54 text

Snapshots provide more detail about memory distribution

Slide 55

Slide 55 text

Use snapshots to locate retention

Slide 56

Slide 56 text

We used to profile with the 3-snapshot technique

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

We expect memory allocated between the second and first snapshot to have been garbage collected

Slide 59

Slide 59 text

The Chrome DevTools offer the object allocation tracker

Slide 60

Slide 60 text

The object allocation tracker combines a timeline with snapshots

Slide 61

Slide 61 text

The object allocation tracker combines the best of both worlds

Slide 62

Slide 62 text

Thanks to the object allocation tracker we no longer have to perform the 3-snapshot technique manually