diff options
Diffstat (limited to 'files/pl/tools/performance/flame_chart/index.html')
| -rw-r--r-- | files/pl/tools/performance/flame_chart/index.html | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/files/pl/tools/performance/flame_chart/index.html b/files/pl/tools/performance/flame_chart/index.html new file mode 100644 index 0000000000..60b17d4011 --- /dev/null +++ b/files/pl/tools/performance/flame_chart/index.html @@ -0,0 +1,104 @@ +--- +title: Flame Chart +slug: Tools/Performance/Flame_Chart +translation_of: Tools/Performance/Flame_Chart +original_slug: Narzędzia/Performance/Flame_Chart +--- +<div class="summary"> +<p>The Flame Chart shows you the state of the JavaScript stack for your code at every millisecond during the performance profile.</p> + +<p>This gives you a way to know exactly which function was executing at any point during the recording, how long it ran for, and where it was called from.</p> +</div> + +<p>The Call Tree and the Flame Chart are both used to analyze your site's JavaScript, and they both use the same data: a sample of the JavaScript engine's stack, taken periodically during the recording.</p> + +<p>But while the Call Tree organizes this data to show you where your program is spending most time in aggregate across the recording, the Flame Chart uses it to show you when in the recording particular functions are executing. Essentially it shows you the state of the call stack at any given point during the recording.</p> + +<p>Here's a screenshot showing the Flame Chart for a section of a profile:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10989/perf-flame-chart-overview.png" style="display: block; height: 622px; margin-left: auto; margin-right: auto; width: 1676px;"></p> + +<p>First of all, you'll see that, in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Recording_overview">recording overview pane</a>, we've selected a small slice of the recording to view in the Flame Chart. The Flame Chart displays a lot of data, so to get readable results, it's usually necessary to zoom in.</p> + +<p>In the Flame Chart view itself, along the X-axis is time. The screenshot above covers the period from 1435ms to a little past 1465ms. Along the Y-axis are the functions on the call stack at that point in time, with the top-level at the top, and the leaf function at the bottom. Functions are color-coded to make them easier to distinguish.</p> + +<p>This gives you a way to know exactly which function was executing at any point during the recording, how long it ran for, and where it was called from.</p> + +<h2 id="Zooming_and_panning">Zooming and panning</h2> + +<p>To work effectively with the Flame Chart, you'll need to be able to navigate it. There are two main controls you can use to navigate the Flame Chart:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Zoom</strong>: increase/decrease the selected portion of the complete profile that's displayed in the Flame Chart</td> + <td> + <p>1) Mouse wheel up/down in the Flame Chart.</p> + + <p>2) Trackpad 2 fingers up/down in the Flame Chart.</p> + </td> + </tr> + <tr> + <td><strong>Pan</strong>: move the selected portion of the complete profile left and right</td> + <td> + <p>1) Click and drag the selected portion in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Recording_overview">recording overview pane</a>.</p> + + <p>2) Click and drag anywhere in the Flame Chart.</p> + </td> + </tr> + </tbody> +</table> + +<p>{{EmbedYouTube("BzfkBRFucp8")}}</p> + +<h2 id="An_example">An example</h2> + +<p>To see how the Flame Chart can reveal the behavior of your program, we'll look at a simple example. We'll use the same example as in the <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> page: a program that compares three different sorting algorithms. There's a <a href="/en-US/docs/Tools/Performance/Examples/Sorting_algorithms_comparison">separate page</a> that gives an overview of this program's structure.</p> + +<p>We'll use the same profile file as that used in the Call Tree page. In the call tree page, we figured out that the program call graph in that profile, and the associated sample count, looked like this:</p> + +<pre>sortAll() // 8 + + -> sort() // 37 + + -> bubbleSort() // 1345 + + -> swap() // 252 + + -> selectionSort() // 190 + + -> swap() // 1 + + -> quickSort() // 103 + + -> partition() // 12</pre> + +<p>First, we'll just select the whole section in which the program was active:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10991/perf-flame-chart-zoomed-out.png" style="display: block; height: 350px; margin-left: auto; margin-right: auto; width: 1212px;"></p> + +<p>At the top, colored purple, is the <code>sortAll()</code> call, running throughout the program from start to finish. Underneath that, colored olive-green, are the calls it's making to <code>sort()</code>. Underneath that, like the teeth of a comb, are all the calls being made to each sorting algorithm.</p> + +<p>Let's zoom in:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10993/perf-flame-chart-zoom-1.png" style="display: block; height: 350px; margin-left: auto; margin-right: auto; width: 1212px;"></p> + +<p>This slice is about 140 ms long, and shows us more details of the functions being called by <code>sort()</code>. The <code>sort()</code> code is just this:</p> + +<pre class="brush: js">function sort(unsorted) { + console.log(bubbleSort(unsorted)); + console.log(selectionSort(unsorted)); + console.log(quickSort(unsorted)); +}</pre> + +<p>The markers labeled "bubb..." and colored olive-green are presumably <code>bubbleSort()</code>. The ones colored plain green are presumably the other sort functions. Even at a glance, we can see that the bubble sort blocks are much wider (of a longer duration) than the others.</p> + +<p>We can also see some functions being called from <code>bubbleSort()</code>, colored purple.</p> + +<p>Let's zoom in one more time:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10995/perf-flame-chart-zoom-2.png" style="display: block; height: 348px; margin-left: auto; margin-right: auto; width: 1212px;"></p> + +<p>This slice is about 20ms long. We can see that the purple markers underneath <code>bubbleSort()</code> are the calls to <code>swap()</code>. If you counted them all, the Call Tree view tells us that you'd see 253 of them. All the ones in this zoom are underneath <code>bubbleSort()</code>, but according to the Call Tree view, the profile does contain one under <code>selectionSort()</code>.</p> + +<p>We can also see that two of the green markers are for <code>selectionSort()</code> and <code>quickSort()</code>, but we're also seeing calls to platform (Gecko) code in between our calls to the sorting functions. It seems very likely that this is from the <code>console.log()</code> calls in <code>sort()</code>.</p> |