1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
---
title: Производительность
slug: Tools/Производительность
translation_of: Tools/Performance
---
<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>
|
