initial commit

1 files changed, 91 insertions, 0 deletions

diff --git a/files/zh-cn/tools/performance/index.html b/files/zh-cn/tools/performance/index.html
new file mode 100644
index 0000000000..9c51584f00
--- /dev/null
+++ b/files/zh-cn/tools/performance/index.html
@@ -0,0 +1,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>