blob: 9c51584f000e1e01240e17f089652daac555907f (
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
|
---
title: 性能
slug: Tools/Performance
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>
</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">界面之旅</a></dt>
<dd>
<p>要了解使用性能工具的方法，这是一个快速的界面指导。</p>
</dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="/en-US/docs/Tools/Performance/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">帧频（刷新率）</a></dt>
<dd>了解你网站的整体响应能力。</dd>
<dt><a href="/en-US/docs/Tools/Performance/Call_Tree">调用树</a></dt>
<dd>找到你网站上JavaScript的瓶颈。</dd>
</dl>
</div>
<div class="column-half">
<dl>
<dt><a href="/en-US/docs/Tools/Performance/Waterfall">瀑布流</a></dt>
<dd>了解当用户与站点进行交互时浏览器的工作。</dd>
<dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">火焰图</a></dt>
<dd>看看在记录的过程中，哪些JavaScript函数执行。</dd>
<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">驱动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">密集JavaScript</a></dt>
<dd>使用帧频和瀑布流工具来突出长期运行Javascript引起的性能问题，以及在这种状况下如何使用工作的代码可以造成有效帮助。</dd>
</dl>
</div>
</div>
<p> </p>
<div class="column-half">
<dl>
<dd> </dd>
</dl>
</div>
<p> </p>
|
