---
title: Производительность
slug: Tools/Performance
translation_of: Tools/Performance
original_slug: Tools/Производительность
---
<div>{{ToolsSidebar}}</div><p>Инструмент даёт вам понять общую отзывчивость вашего сайта,  JavaScript и общее представление о разметке. С помощью инструмента производительности вы создадите запись или профиль своего сайта за определённый промежуток времени. Затем, инструмент покажет вам действия браузера и график смены частоты кадров, поверх профиля, рендера вашего сайта.</p>

<p>Вы получите четыре набора инструментов для более подробного изучения аспектов профиля:</p>

<ul>
 <li> <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> (Водопад) показывает различные операции браузера, например, выполняет макет, JavaScript, перерисовывает и собирает мусор</li>
 <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> (Дерево вызова) показывает функции JavaScript, в которых браузер провёл большую часть своего времени</li>
 <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> (Пламенный График) показывает стек вызовов JavaScript над конечной записью.</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Allocations">Allocations</a>. В этом представлении отображаются распределения кучи, сделанные вашим кодом в ходе записи. Это представление появляется только в том случае, если вы отметили «Записать выделение» в настройках инструмента «Производительность».</li>
</ul>

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

<hr>
<h2 id="Приступая_к_работе">Приступая к работе</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>Чтобы найти свой вариант производительности инструмента, вот краткий обзор пользовательского интерфейса 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>Основные задачи: откройте инструмент создать, сохранить, загрузить и настроить записи.</dd>
</dl>
</div>
</div>

<hr>
<h2 id="Компоненты_инструмента_производительности">Компоненты инструмента производительности</h2>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="/en-US/docs/Tools/Performance/Frame_rate" dir="ltr">Frame rate (Частота кадров)</a></dt>
 <dd>Исследование вашего сайта на отзывчивость.</dd>
 <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree (Дерево вызовов)</a></dt>
 <dd>Поиск узких мест вашего сайта на JavaScript.</dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall (Водопад)</a></dt>
 <dd>Исследует работу браузера на взаимодействие пользователей с вашим сайтом.</dd>
 <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart (Диаграмма)</a></dt>
 <dd>Обзор выполнения функций JavaScript во времени.</dd>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Allocations">Allocations (Распределение)</a></dt>
 <dd>Просмотр распределений сделанных вашим кодом во время записи.</dd>
 <dt> </dt>
 <dd> </dd>
</dl>
</div>
</div>

<hr>
<h2 id="Сценарии">Сценарии</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 (Свойства анимации CSS)</a></dt>
 <dd>Использует водопад чтобы понять как браузер обновляет страницу, и как меняя разные свойства CSS можно улучшить производительность.</dd>
 <dd> </dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript (Интенсивный JS)</a></dt>
 <dd>Использует частоту кадров и инструменты водопада для выделения проблем с производительностью, вызванные длительной загрузкой JavaScript и каким образом с помощью инструментов разработчика  возможно исправить ситуацию.</dd>
</dl>
</div>
</div>

<p> </p>

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

<p> </p>