initial commit

2 files changed, 200 insertions, 0 deletions

diff --git a/files/pl/narzędzia/performance/flame_chart/index.html b/files/pl/narzędzia/performance/flame_chart/index.html
new file mode 100644
index 0000000000..1edebd4d01
--- /dev/null
+++ b/files/pl/narzędzia/performance/flame_chart/index.html
@@ -0,0 +1,103 @@
+---
+title: Flame Chart
+slug: Narzędzia/Performance/Flame_Chart
+translation_of: Tools/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
+
+    -&gt; sort()                     //   37
+
+        -&gt; bubbleSort()           // 1345
+
+            -&gt; swap()             //  252
+
+        -&gt; selectionSort()        //  190
+
+            -&gt; swap()             //    1
+
+        -&gt; quickSort()            //  103
+
+            -&gt; 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>
diff --git a/files/pl/narzędzia/performance/index.html b/files/pl/narzędzia/performance/index.html
new file mode 100644
index 0000000000..346399027f
--- /dev/null
+++ b/files/pl/narzędzia/performance/index.html
@@ -0,0 +1,97 @@
+---
+title: Performance
+slug: Narzędzia/Performance
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Performance
+---
+<p>The Performance tool gives you insight into your site's general responsiveness, JavaScript and layout performance. With the Performance tool you create a recording, or profile, of your site over a period of time. The tool then shows you an <a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">overview</a> of the things the browser was doing to render your site over the profile, and a graph of the <a href="/en-US/docs/Tools/Performance/Frame_rate">frame rate</a> over the profile.</p>
+
+<p>You get four sub-tools to examine aspects of the profile in more detail:</p>
+
+<ul>
+ <li>the <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> shows the different operations the browser was performing, such as executing layout, JavaScript, repaints, and garbage collection</li>
+ <li>the <a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> shows the JavaScript functions in which the browser spent most of its time</li>
+ <li>the <a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> shows the JavaScript call stack over the course of the recording</li>
+ <li>the <a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a> view shows the heap allocations made by your code over the course of the recording. This view only appears if you checked "Record Allocations" in the Performance tool settings.</li>
+</ul>
+
+<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>
+
+<hr>
+<h2 id="Getting_started">Getting started</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/UI_Tour">UI Tour</a></dt>
+ <dd>
+ <p>To find your way around the Performance tool, here's a quick tour of the UI.</p>
+ </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/How_to">How to</a></dt>
+ <dd>Basic tasks: open the tool, create, save, load, and configure recordings</dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Components_of_the_Performance_tool">Components of the Performance tool</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate</a></dt>
+ <dd>Understand your site's overall responsiveness.</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></dt>
+ <dd>Find bottlenecks in your site's JavaScript.</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Allocations">Allocations</a></dt>
+ <dd>See the allocations made by your code over the course of the recording.</dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt>
+ <dd>Understand the work the browser's doing as the user interacts with your site.</dd>
+ <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt>
+ <dd>See which JavaScript functions are executing, and when, over the course of the recording.</dd>
+ <dd> </dd>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Scenarios">Scenarios</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animating CSS properties</a></dt>
+ <dd>Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.</dd>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript</a></dt>
+ <dd>Uses the frame rate and Waterfall tools to highlight performance problems caused by long-running JavaScript, and how using workers can help in this situation.</dd>
+</dl>
+</div>
+</div>
+
+<p> </p>
+
+<div class="column-half">
+<dl>
+ <dd> </dd>
+</dl>
+</div>
+
+<p> </p>