Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Diagnosing UI Performance Issues

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

Thomas Anciaux

August 29, 2014
Tweet

Other Decks in Programming

Transcript

  1. If all but a few objects of the same type

    are at the same distance, it could indicate a leak
  2. 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
  3. The longer it takes to render a frame, the longer

    JavaScript execution will be blocked
  4. A timeline can be used to record memory usage, #DOM

    nodes and #event listeners over time
  5. 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
  6. Thanks to the object allocation tracker we no longer have

    to perform the 3-snapshot technique manually