devtools-docs/docs/cpu-profiling.html

{{+bindTo:partials.standard_devtools_article}}
<h1>Profiling JavaScript Performance</h1>





<div class="collapsible">
  <h2 id="cpu-profiles">Introduction to JavaScript Profiling</h2>


  <p>Using Google Chrome, open the <a href="http://v8.googlecode.com/svn/data/benchmarks/v7/run.html" target=
  "_blank">V8 Benchmark Suite</a> page. Now open the Chrome DevTools, navigate to the Profiles panel, and verify "Collect JavaScript CPU Profile" is selected. Now, click the <strong>Start
  </strong> button or press <span class="kbd">Cmd</span> + <span class="kbd">E</span> start recording a JavaScript CPU profile. Now refresh the V8 Benchmark Suite page.</p>

  <p>When the page has completed reloading, a score for the benchmark tests
  is shown. Return to the DevTools and stop the recording by clicking the Stop button or by pressing <span class="kbd">Cmd</span> + <span class="kbd">E</span> again.</p>

  <div class="screenshot">
    <img src="cpu-profiling-files/heavy-bottom-up.png">
  </div>

  <p>This <strong>Bottom Up</strong> view lists functions by impact on performance.
    It also enables you to examine the calling paths to those functions.
  </p>

  <p>Now select the <strong>Top Down</strong> view by clicking the Bottom Up
  / Top Down selection button. Then click the small arrow to the left of
  <strong>(program)</strong> in the <strong>Function</strong> column. The
  <strong>Top Down</strong> view shows an overall picture of the calling
  structure, starting at the top of the call stack.</p>

  <p class="note"><b>Note:</b> You can click the <strong>Percentage</strong> button to view absolute times.</p>

  <p>Select one of the functions in the <strong>Function</strong> column,
  then click the <strong>Focus selected function</strong> button (the Eye
  icon on the right).</p>

  <div class="screenshot">
    <img src="cpu-profiling-files/focus-selected-function.png">
  </div>

  <p>This filters the profile to show only the selected function and its callers. Click the <strong>Reload</strong> button at the bottom-right of the window to restore the profile to its original state.</p>

  <p>Select one of the functions in the <strong>Function</strong> column,
  then click the <strong>Exclude selected function</strong> button (the X
  icon). Depending on the function you selected, you should see something
  like this:</p>

  <div class="screenshot">
    <img src="cpu-profiling-files/tree-top-down.png">
  </div>

  <p>The <strong>Exclude selected function</strong> button removes the selected function from the profile and charges its callers with the excluded function's total time. Click the <strong>Reload</strong> button to restore the profile to its original state.</p>

  <p>You can record multiple profiles. Click the <strong>Start profiling</strong> button, reload the V8 Benchmark page, then click the <strong>Stop profiling</strong> button.</p>

  <div class="screenshot">
    <img src="cpu-profiling-files/sidebar-profile-history.png">
  </div>

  <p>The sidebar on the left lists your recorded profiles, the tree view on the right shows the information gathered for the selected profile.</p>


</div>
<div class="collapsible">
  <h2 id="flame-chart">Using the Flame Chart</h2>

  <p>The Flame Chart view provides a visual representation of JavaScript processing over time, similar to those found in the Timeline and Network panels. Using the <strong>Flame Chart</strong> feature on the Details view after performing a <em>JavaScript &amp; CPU profile</em>, you are able to view the profile data a few different ways.</p>

  <h3>Visualizing execution paths</h3>

  <p>By analyzing and understanding function call progression visually you can gain a better understanding of the execution paths within your app.</p>

  <div class="screenshot">
    <img src="cpu-profiling-files/flamechart00.png">
  </div>


  <h3>Identifying outliers with color coding</h3>

  <p>When zoomed out you can identify repetitive patterns that could be optimized, or more importantly, you're able to spot outliers or unexpected executions much easier.</p>

  <div class="screenshot">
    <img src="cpu-profiling-files/flamechart-outliers.png">
  </div>


  <h3>Visualizing JavaScript profiler data against a time scale (like Timeline)</h3>

  <p>Other JavaScript profiling reports data that is aggregated <em>over time</em>, whereas the Flame Chart reports data <em>by time</em>. This means when you see events happen, you are able to drill into the time scale of them and really get some perspective on execution of JavaScript. For example, when you see big streaks of yellow in the Timeline, this is the perfect way to see the issue.</p>

  <div class="screenshot">
    <img src="cpu-profiling-files/flamechart02.png">
  </div>

  <p class="note"><strong>Note</strong>: The horizontal axis is time and vertical axis is the call stack. Expensive functions are wide. Call stacks are represented on the Y axis, so a tall flame is not necessarily significant. Pay close attention to wide bars, no matter their position in the call stack.</p>


  <h3>How to use the Flame Chart:</h3>

  <ol>
    <li>Open the DevTools and go to the Profiles panel.</li>
    <li>Choose <strong>Record JavaScript CPU profile</strong> and click <strong>Start</strong>.</li>
    <li>When you are done collecting data, click <strong>Stop</strong>.</li>
  </ol>

  <p>In the profile view, select the Flame Chart visualization from the select menu at the bottom of the DevTools.</p>

  <div class="screenshot">
    <img src="cpu-profiling-files/flamechart03.jpg">
  </div>

  <p class="note"><strong>Note</strong>: For increased accuracy of profiling times enable <strong>High resolution CPU profiling</strong> in the DevTools flame-chart under Profiling. When enabled, you can zoom into the graph to view it by a tenth of a millisecond even.</p>

  <p>Across the top of the panel is an overview that shows the entire recording. You can zoom in on a specific region of the overview by selecting it with your mouse as shown below, and you can also pan left and right by clicking on the white area and dragging your mouse. The Details view timescale shrinks accordingly.</p>

  <div class="screenshot">
    <img src="cpu-profiling-files/flamechart04.png">
  </div>

  <p>In the Details view, a <strong>call stack</strong> is represented as a stack of function "blocks". A block that sits atop another was called by the lower function block. Hovering over a given block displays its function name and timing data:</p>

  <div class="screenshot">
    <img src="cpu-profiling-files/flamechart05.jpg">
  </div>

  <ul>
    <li><strong>Name</strong> — The name of the function.</li>
    <li><strong>Self time</strong> — How long it took to complete the current invocation of the function, including only the statements in the function itself, not including any functions that it called.</li>
    <li><strong>Total time</strong> — The time it took to complete the current invocation of this function and any functions that it called.</li>
    <li><strong>Aggregated self time</strong> — Aggregate time for all invocations of the function across the recording, not including functions called by this function.</li>
    <li><strong>Aggregated total time</strong> — Aggregate total time for all invocations of the function, including functions called by this function.</li>
  </ul>

  <p>The colors in the Flame Chart fairly random, however functions will always be colored the same across invocations. This allows you to see a pattern of execution and then spot outliers easier. There is no correlation to the colors used in the Timeline.</p>

  <div class="screenshot">
    <img src="cpu-profiling-files/flamechart06.png">
  </div>

  <p>Clicking a function block opens its containing JavaScript file in the Sources panel, at the line where the function is defined.</p>




</div>
{{/partials.standard_devtools_article}}