---
title: Rendimiento
slug: Tools/Performance
translation_of: Tools/Performance
original_slug: Tools/Desempeño
---
<p>La herramienta de Rendimiento te da una visión general de la capacidad de respuesta del sitio que visitas así como de su JavaScript y el modelo de diseño. Con esta herramienta puedes generar un perfil o registro de un sitio web en un período de tiempo. En dicho perfil la herramienta te ofrece una <a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">vista general</a> de todas las acciones que tu navegador empleó para generar el sitio web así como una gráfica con el <a href="/en-US/docs/Tools/Performance/Frame_rate">tiempo de respuesta</a> de dicha pagina.</p>

<p>Para examinar con más detalle los aspectos del perfil tienes tres herramientas auxiliares:</p>

<ul>
 <li><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a>  muestra qué operaciones ejecutó el navegador, tales como el modelo de ejecución empleado, JavaScript, repaints y liberación de memoria.</li>
 <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> muestra en qué funciones de JavaScript se requirió más tiempo del navegador.</li>
 <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> muestra la pila de llamadas de JavaScript a lo largo de la grabación.</li>
</ul>

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

<hr>
<h2 id="Preámbulo">Preámbulo</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>Guía rápida de la interfaz para comenzar a manejar la herramienta de rendimiento.</p>
 </dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="/en-US/docs/Tools/Performance/How_to">How to</a></dt>
 <dd>Tareas básicas: abrir la herramienta, crear, guardar, cargar y configurar las grabaciones.</dd>
</dl>
</div>
</div>

<hr>
<h2 id="Componentes_de_la_herramienta_de_Rendimiento">Componentes de la herramienta de Rendimiento</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>Comprender la capacidad de respuesta general de tu sitio.</dd>
 <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></dt>
 <dd>Encontrar cuellos de botella en el JavaScript de tu sitio.</dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt>
 <dd>Comprender el trabajo que el navegador realiza cuando un usuario interactúa con el sitio web.</dd>
 <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt>
 <dd>Ver qué funciones de JavaScript se ejecutan , y cuando , en el transcurso de la grabación.</dd>
 <dd> </dd>
</dl>
</div>
</div>

<hr>
<h2 id="Escenarios">Escenarios</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>Utiliza Waterfall para entender cómo el navegador actualiza una página, y cómo las diferentes propiedades CSS pueden afectar al rendimiento.</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>Utiliza la velocidad de los fotogramas y la herramienta Waterfall para resaltar los problemas de rendimiento provocados por los JavaScript de larga duración y cómo los workers pueden ayudar en esta situación.</dd>
</dl>
</div>
</div>

<p> </p>

<div class="column-half">
<dl>
 <dd> </dd>
</dl>
</div>

<p> </p>