---
title: Performance
slug: Tools/Performance
translation_of: Tools/Performance
---
<div>{{ToolsSidebar}}</div>

<p>Mit dem Leistungstool erhalten Sie Einblick in die allgemeine Reaktionsfähigkeit, JavaScript und Layoutleistung Ihrer Website. Mit dem Leistungstool erstellen Sie über einen bestimmten Zeitraum eine Aufnahme oder ein Profil Ihrer Website. Das Tool zeigt Ihnen dann einen <a href="/de/docs/Tools/Performance/UI_Tour#Waterfall_overview">Überblick</a> über die Aktivitäten des Browsers zum Rendern Ihrer Website über das Profil und eine Grafik der <a href="/de/docs/Tools/Performance/Frame_rate">Bildrate</a> über dem Profil.</p>

<p>Sie erhalten vier Unterwerkzeuge, mit denen Sie Aspekte des Profils genauer untersuchen können:</p>

<ul>
 <li>Der <a href="/de/docs/Tools/Performance/Waterfall">Wasserfall</a> zeigt die verschiedenen Vorgänge, die der Browser ausgeführt hat, z. B. die Ausführung von Layout, JavaScript, Repaints und Garbage Collection</li>
 <li>Der <a href="/de/docs/Tools/Performance/Call_Tree">Aufrufbaum</a> zeigt die JavaScript-Funktionen, in denen der Browser die meiste Zeit verbracht hat</li>
 <li>Das <a href="/de/docs/Tools/Performance/Flame_Chart">Flammendiagramm</a> zeigt den JavaScript-Aufrufstack über den Verlauf der Aufzeichnung</li>
 <li>Die <a href="/de/docs/Tools/Performance/Allocations">Allokationsansicht</a> zeigt die von Ihrem Code im Verlauf der Aufzeichnung vorgenommenen Heap-Zuordnungen an. Diese Ansicht wird nur angezeigt, wenn Sie in den Einstellungen des Leistungstools die Option "Datensatzzuordnungen" aktiviert haben.</li>
</ul>

<p>{{EmbedYouTube("WBmttwfA_k8")}}</p>

<hr>
<h2 id="Erste_Schritte">Erste Schritte</h2>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="/de/docs/Tools/Performance/UI_Tour">UI Tour</a></dt>
 <dd>
 <p>Um sich im Performance-Tool zurechtzufinden, finden Sie hier eine kurze Einführung in die Benutzeroberfläche.</p>
 </dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="/de/docs/Tools/Performance/How_to">How to</a></dt>
 <dd>Grundlagen: Öffnen Sie das Tool, erstellen, speichern, laden und konfigurieren Sie Aufnahmen</dd>
</dl>
</div>
</div>

<hr>
<h2 id="Komponenten_des_Performance-Tools">Komponenten des Performance-Tools</h2>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="/de/docs/Tools/Performance/Frame_rate">Bildrate</a></dt>
 <dd>Understand your site's overall responsiveness.</dd>
 <dt><a href="/de/docs/Tools/Performance/Call_Tree">Aufruf-Baum</a></dt>
 <dd>Find bottlenecks in your site's JavaScript.</dd>
 <dt><a href="/de/docs/Tools/Performance/Allocations">Allokationen</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="/de/docs/Tools/Performance/Waterfall">Wasserfall</a></dt>
 <dd>Understand the work the browser's doing as the user interacts with your site.</dd>
 <dt><a href="/de/docs/Tools/Performance/Flame_Chart">Flammendiagramm</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="/de/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animieren von CSS-Eigenschaften</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="/de/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensives 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>