diff options
Diffstat (limited to 'files/tr/tools/performance/index.html')
| -rw-r--r-- | files/tr/tools/performance/index.html | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/files/tr/tools/performance/index.html b/files/tr/tools/performance/index.html new file mode 100644 index 0000000000..803e590515 --- /dev/null +++ b/files/tr/tools/performance/index.html @@ -0,0 +1,92 @@ +--- +title: Performance +slug: Araclar/Performance +translation_of: Tools/Performance +--- +<div>{{ToolsSidebar}}</div> + +<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> + +<div class="column-half"> +<dl> + <dd></dd> +</dl> +</div> |