---
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>