DevTools/Planning/Performance/Details

Performance Overview

To optimize the performance of an html5 and JS based web application, we need three general pieces of information, each of which requires slightly different tools:

1) What's slowing down execution
What it really comes down to is how well the application responds and flows. So we are basically looking for slowdowns in frame rates and looking for the root causes of those slow downs. Those root causes generally come from three sources:

• a) Excessive DOM and graphical changes coming from JS execution
• b) Excessive DOM and graphical changes coming from unoptimized HTML5 and CSS
• c) Unoptimized JS code itself, i.e. the code just takes too long to run
• d) Unoptimized JS execution (baseline versus ionmonkey)
• e) Unoptimized garbage collection: if we keep releasing a lot of objects, GC will run more frequently

The right tooling will instrument as lightly as possible in order to minimize impact on performance and will provide a time-based view of execution.

2) What's increasing memory consumption

3) What's burning up too much CPU cycles

When it comes to CPU

   App time performance

   Live Frame rate visualization

   Frame rate in recordings

   Frame rate slow down root cause 

   JS

   'DOM/JS

   GC

   JS Execution

   slow JS execution / reveal hotspots

   unoptimized / non-jitted JS

   Memory

   recording heap memory profiles

   visualization

   DOM Fragment leaks

   short term leaks

   Heap snapshots