blob: 7b77de46ffaf6e0dbab7d74af5434f4dc1b78274 (
plain)
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
---
title: UI Tour
slug: Tools/Performance/UI_Tour
translation_of: Tools/Performance/UI_Tour
---
<div>{{ToolsSidebar}}</div>
<p>性能工具界面包含下面4个部分：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/13220/perf-tool-pieces.png" style="display: block; height: 351px; margin-left: auto; margin-right: auto; width: 808px;"></p>
<ul>
<li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/UI_Tour#工具栏">工具栏</a></li>
<li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/UI_Tour#录制列表面板">录制列表面板</a></li>
<li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/UI_Tour#录制概览">录制概览</a></li>
<li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/UI_Tour#详情面板">详情面板</a>，可能包含下面内容的某一个：
<ul>
<li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/Waterfall">瀑布流</a></li>
<li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/Call_Tree">调用树</a></li>
<li><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/Flame_Chart">火焰图</a></li>
</ul>
</li>
</ul>
<h2 id="工具栏">工具栏</h2>
<p>工具栏包含如下按钮:</p>
<ul>
<li>开始和停止录制</li>
<li>导入之前保存的录制文件</li>
<li>清空录制列表面板. 此操作会删除所有未保存的录制<em>.</em></li>
<li>过滤在瀑布流展示的<a href="/zh-CN/docs/Tools/Performance/Waterfall#Markers">标记</a> </li>
<li>切换<a href="/zh-CN/docs/Tools/Performance/UI_Tour#Details_pane">详情面板</a>的活动工具.</li>
<li>配置性能选项</li>
</ul>
<p><img alt="" src="https://mdn.mozillademos.org/files/13222/perf-toolbar.png" style="display: block; height: 434px; margin-left: auto; margin-right: auto; width: 836px;"></p>
<h2 id="录制列表面板">录制列表面板</h2>
<p>录制列表面板列出了您已加载的所有录制，包括您在此会话中进行的录制和已导入的所有录制。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10917/perf-recordings-pane.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 300px;"></p>
<p>任何时候，都有一个录制被选择，并且该录制会显示在工具界面的其余部分中。 要选择其他录制，就在面板中单击对应录制。 要将录制另存为JSON文件，请单击“保存”。</p>
<h2 id="录制概览">录制概览</h2>
<p>这里是全部录制的概览，x 轴是时间。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10919/perf-overview.png" style="display: block; height: 164px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>录制概览包含两部分： 瀑布流概览和帧率图</p>
<h3 id="瀑布流概览">瀑布流概览</h3>
<p>展示了压缩过的<a href="/zh-CN/docs/Tools/Performance/Waterfall">瀑布流</a>:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10923/perf-waterfall-overview.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>记录操作时使用与<a href="/zh-CN/docs/Tools/Performance/Waterfall#Markers">主瀑布视图相同的方案</a>进行颜色标记。</p>
<h3 id="帧率图">帧率图</h3>
<p>帧率可以让您大致了解录制期间浏览器的响应能力：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10921/perf-frame-rate.png" style="display: block; height: 88px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>请参阅有关<a href="/zh-CN/docs/Tools/Performance/Frame_rate">帧率</a>的单独文章。</p>
<h3 id="关联事件">关联事件</h3>
<p>由于这些元素是同步的，因此可以将一个元素中的事件与另一个元素中的事件相关联。</p>
<p>例如，在下面的屏幕截图中，长时间运行的绘制操作（在瀑布流中<a href="/zh-CN/docs/Tools/Performance/Waterfall#Markers">显示为绿色条</a>）对应于帧速率的下降：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10925/perf-overview-correlation.png" style="display: block; height: 494px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<h3 id="放大">放大</h3>
<p>您可以使用概览选择录制的一部分以进行更详细的查看。 选择一个区间，主视图将更新为仅包含所选部分。 在下面的屏幕截图中，我们选择了低帧率区间，就可以更详细地查看长时间运行的绘制操作：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10927/perf-zoomed.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<h2 id="详情面板">详情面板</h2>
<p>详情面板显示当前选择的工具选项。 要切换到其他<a href="/zh-CN/docs/Tools/Performance/UI_Tour#Toolbar">工具</a>，请使用工具栏中的按钮。</p>
<h3 id="瀑布流">瀑布流</h3>
<p>瀑布流展示了录制过程中浏览器所做的工作：执行 JavaScript，更新 CSS，更新页面布局以及执行重新绘制。 x 轴表示时间，录制的操作横着看就像瀑布一样，说明了浏览器按照串行进行工作。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10929/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>要了解有关瀑布的更多信息，请参见单独的<a href="/zh-CN/docs/Tools/Performance/Waterfall">瀑布</a>页面。</p>
<h3 id="调用树">调用树</h3>
<p>调用树是页面中运行的 JavaScript 的采样探查器。 它会定期对 JavaScript 引擎的状态进行采样，并记录在采样时所执行代码的堆栈。 从统计上讲，我们执行特定功能所用的样本数量与浏览器执行该功能所花费的时间相对应，由此您可以确定代码中的瓶颈。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10949/perf-call-tree.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 972px;"><br>
要了解有关调用树的更多信息，请参见单独的<a href="/zh-CN/docs/Tools/Performance/Call_Tree">调用树</a>页面。 </p>
<h3 id="火焰图">火焰图</h3>
<p>如果调用树从统计角度告诉您，网站在整个录制过程中执行哪些功能花费了最多时间，则火焰图会告诉您录制过程中任意给定时刻的调用堆栈：</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/10933/perf-flame-chart.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>要了解有关火焰图的更多信息，请参见单独的<a href="/zh-CN/docs/Tools/Performance/Flame_Chart">火焰图</a>页面。</p>
<h3 id="分配">分配</h3>
<div class="geckoVersionNote">
<p>分配视图是Firefox 46中的新增功能。</p>
</div>
<p>分配视图类似于调用树视图，但用于分配：它显示页面中哪些功能在录制过程中分配的内存最多。</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/12413/allocations-view-1.png" style="display: block; margin-left: auto; margin-right: auto; width: 972px;"></p>
<p>仅当录制文件之前在“性能”工具设置中选中“记录分配”时，才会显示“分配”视图：</p>
<p>{{EmbedYouTube("Le9tTo7bqts")}}</p>
<p>要了解有关“分配”视图的更多信息，请参见单独的<a href="/zh-CN/docs/Tools/Performance/Allocations">分配</a>页面。</p>
|
