initial commit

5 files changed, 890 insertions, 0 deletions

diff --git a/files/zh-cn/tools/performance/call_tree/index.html b/files/zh-cn/tools/performance/call_tree/index.html
new file mode 100644
index 0000000000..93700f1f75
--- /dev/null
+++ b/files/zh-cn/tools/performance/call_tree/index.html
@@ -0,0 +1,108 @@
+---
+title: Call Tree
+slug: Tools/Performance/Call_Tree
+translation_of: Tools/Performance/Call_Tree
+---
+<div>{{ToolsSidebar}}</div><div class="summary">
+<p><font><font>调用树会告诉您浏览器花费最多时间使用哪些JavaScript函数。通过分析其结果，您可以发现代码中的瓶颈 - 浏览器花费了大量时间的地方。</font></font></p>
+
+<p><font><font>这些瓶颈是您可以做出的任何优化都会产生最大影响的地方。</font></font></p>
+</div>
+
+<p><font><font>Call Tree是一个采样分析器。</font><font>它定期对JavaScript引擎的状态进行采样，并记录当时正在执行的代码的堆栈。</font><font>统计上，我们执行某个特定功能时采用的样本数量与浏览器执行它的时间相对应。</font></font></p>
+
+<div class="note">
+<p><font><font>在本文中，我们将使用简单程序的输出作为示例。</font><font>如果你想让程序试验你的个人资料，你可以在</font></font><a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/js-call-tree-1/"><font><font>这里</font></font></a><font><font>找到它</font><font>。</font><font>您可以在</font></font><a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/js-call-tree-1/profile/call-tree.json"><font><font>这里</font></font></a><font><font>找到我们讨论的特定配置文件</font><font>- 只需将其导入性能工具即可。</font></font></p>
+
+<p><font><font>有描述该计划的结构的短页面</font></font><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Examples/Sorting_algorithms_comparison"><font><font>在这里</font></font></a><font><font>。</font></font></p>
+
+<p><font><font>请注意，我们使用相同的程序 - 实际上是相同的配置文件 - 在</font></font><a href="/en-US/docs/Tools/Performance/Flame_Chart"><font><font>Flame Chart</font></font></a><font><font>的文档页面中</font><font>。</font></font></p>
+</div>
+
+<p><font><font>下面的屏幕截图显示了一个程序的输出，该程序比较了三种排序算法 - 冒泡排序，选择排序和快速排序。</font><font>为此，它会生成一些填充了随机整数的数组，并依次使用每种算法对它们进行排序。</font></font></p>
+
+<p><font><font>我们</font></font><a href="/en-US/docs/Tools/Performance/UI_Tour#Zooming_in"><font><font>放大</font></font></a><font><font>了录制的部分，显示了一个很长的JavaScript标记：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10981/perf-call-tree.png" style="display: block; height: 574px; margin-left: auto; margin-right: auto; width: 1052px;"></p>
+
+<p><font><font>Call Tree将结果呈现在表格中。</font><font>每一行表示一个函数，其中至少取得一个样本，并且按照在该函数中取得的样本数从最高到最低排序行。</font></font></p>
+
+<p><em><font><font>样本</font></font></em><font><font>是我们执行这个特定函数时所采样本的数量。</font></font></p>
+
+<p><em><font><font>自我成本</font></font></em><font><font>是指该数字占记录选定部分样本总数的百分比。</font></font></p>
+
+<p><em><font><font>自我时间</font></font></em><font><font>是根据记录的选定部分覆盖的总</font><em><font>时间</font></em><font>将该数字转换为毫秒。</font></font></p>
+
+<p><font><font>在当前版本的调用树中，这些是最重要的列。</font><font>具有较高</font></font><em><font><font>自身成本的</font></font></em><font><font>函数</font><font>是优化的好选择，或者是因为它们需要很长时间才能运行，或者因为它们经常被调用。</font></font></p>
+
+<p><font><font>这个屏幕截图告诉我们一些我们可能已经知道的事情：泡泡排序是一种非常低效的算法。</font><font>泡沫分类中的样本数大约是选择排序中的六倍，是快速排序中的13倍。</font></font></p>
+
+<h2 id="走上调用树"><font><font>走上</font></font><font><font>调用树</font></font></h2>
+
+<p><font><font>每个函数名称旁边都有一个公开箭头：单击它，您可以看到从调用采样的函数到根的备用调用树的路径。</font><font>例如，我们可以扩展条目</font></font><code>bubbleSort()</code><font><font>：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10983/perf-call-tree-expanded-bubblesort.png" style="display: block; height: 512px; margin-left: auto; margin-right: auto; width: 1054px;"></p>
+
+<p><font><font>所以我们可以看到调用图如下所示：</font></font></p>
+
+<pre><font><font>sortAll（）</font></font>
+<font><font>
+    - &gt; sort（）</font></font>
+<font><font>
+        - &gt; bubbleSort（）</font></font></pre>
+
+<p><font><font>另请注意</font><font>，</font><font>此处的</font></font><em><font><font>自我成本</font></font></em><font><font>为</font></font><code>sort()</code><font><font>1.45％，并且请注意，这</font></font><code>sort()</code><font><font>与列表中稍后</font><font>的单独条目相同</font><font>。</font><font>这告诉我们一些样本是</font></font><code>sort()</code><font><font>自己</font><font>采集的</font><font>，而不是它所调用的功能。</font></font></p>
+
+<p><font><font>有时从入口到顶层有多条路径返回。</font><font>让我们扩展条目</font></font><code>swap()</code><font><font>：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10985/perf-call-tree-expanded-sawp.png" style="display: block; height: 636px; margin-left: auto; margin-right: auto; width: 1052px;"></p>
+
+<p><font><font>里面有253个样本</font></font><code>swap()</code><font><font>。</font><font>但是</font></font><code>swap()</code><font><font>通过两种不同的途径达成了：两者</font></font><code>bubbleSort()</code><font><font>并</font></font><code>selectionSort()</code><font><font>使用它们。</font><font>我们还可以看到253个样本中</font></font><code>swap() </code><font><font>有</font><font>252个</font><font>在</font></font><code>bubbleSort()</code><font><font>分支中，只有一个在</font></font><code>selectionSort()</code><font><font>分支中。</font></font></p>
+
+<p><font><font>这个结果意味着冒泡排序比我们想象的效率更低！</font><font>它可以承担另外252个样本的责任，或几乎占总成本的10％。</font></font></p>
+
+<p><font><font>通过这种挖掘，我们可以计算出整个调用图和相关的样本数量：</font></font></p>
+
+<pre><font><font>sortAll（）// 8</font></font>
+<font><font>
+    - &gt; sort（）// 37</font></font>
+<font><font>
+        - &gt; bubbleSort（）// 1345</font></font>
+<font><font>
+            - &gt; swap（）// 252</font></font>
+<font><font>
+        - &gt; selectionSort（）// 190</font></font>
+<font><font>
+            - &gt; swap（）// 1</font></font>
+<font><font>
+        - &gt; quickSort（）// 103</font></font>
+<font><font>
+            - &gt;分区（）// 12</font></font></pre>
+
+<h2 id="平台数据"><font><font>平台数据</font></font></h2>
+
+<p><font><font>您还会看到一些标记为</font></font><em><font><font>Gecko</font></font></em><font><font>，</font></font><em><font><font>输入和事件</font></font></em><font><font>等的行。</font><font>这些代表内部浏览器调用。</font></font></p>
+
+<p><font><font>这也可以是有用的信息。</font><font>如果您的网站正在努力使浏览器工作，这可能不会显示为您的代码中记录的示例，但它仍然是您的问题。</font></font></p>
+
+<p><font><font>在我们的例子中，有679个样本被分配到</font></font><em><font><font>Gecko--</font></font></em><font><font>后面的第二大组</font></font><code>bubbleSort()</code><font><font>。</font><font>我们来扩展一下：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10987/perf-call-tree-expanded-gecko.png" style="display: block; height: 478px; margin-left: auto; margin-right: auto; width: 1050px;"></p>
+
+<p><font><font>这个结果告诉我们，这些样本中有614个，或约占总成本的20％，来自我们的</font></font><code>sort()</code><font><font>呼叫。</font><font>如果我们查看代码</font></font><code>sort()</code><font><font>，应该很明显，高平台数据成本来自重复呼叫</font></font><code>console.log()</code><font><font>：</font></font></p>
+
+<pre class="brush: js line-numbers  language-js" style=""><code class="language-js" style=""><span class="keyword token" style="border: 0px; color: #0077aa; margin: 0px; padding: 0px;">function</span> <span class="function token" style="border: 0px; color: #dd4a68; margin: 0px; padding: 0px;">sort</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">(</span>unsorted<span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">)</span> <span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">{</span>
+  console<span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">.</span><span class="function token" style="border: 0px; color: #dd4a68; margin: 0px; padding: 0px;">log</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">(</span><span class="function token" style="border: 0px; color: #dd4a68; margin: 0px; padding: 0px;">bubbleSort</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">(</span>unsorted<span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">)</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">)</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">;</span>
+  console<span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">.</span><span class="function token" style="border: 0px; color: #dd4a68; margin: 0px; padding: 0px;">log</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">(</span><span class="function token" style="border: 0px; color: #dd4a68; margin: 0px; padding: 0px;">selectionSort</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">(</span>unsorted<span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">)</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">)</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">;</span>
+  console<span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">.</span><span class="function token" style="border: 0px; color: #dd4a68; margin: 0px; padding: 0px;">log</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">(</span><span class="function token" style="border: 0px; color: #dd4a68; margin: 0px; padding: 0px;">quickSort</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">(</span>unsorted<span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">)</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">)</span><span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">;</span>
+<span class="punctuation token" style="border: 0px; color: #999999; margin: 0px; padding: 0px;">}</span></code></pre>
+
+<p><font><font>考虑更有效的方法来实现这一点肯定是值得的。</font></font></p>
+
+<p><font><font>这里要注意的一件事是空闲时间被分类为</font></font><em><font><font>Gecko</font></font></em><font><font>，所以你的配置文件中没有运行JavaScript的部分将贡献</font></font><em><font><font>Gecko</font></font></em><font><font>样本。</font><font>这些与您的网站的性能无关。</font></font></p>
+
+<div class="note">
+<p><font><font>默认情况下，Call Tree不会将平台数据拆分为单独的函数，因为它们会增加很多噪音，并且细节对于不使用Firefox的用户可能不太有用。</font><font>如果您想查看详细信息，请在</font></font><a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar"><font><font>设置中</font></font></a><font><font>选中“显示壁虎平台数据” </font><font>。</font></font></p>
+</div>
+
+<p> </p>
diff --git a/files/zh-cn/tools/performance/frame_rate/index.html b/files/zh-cn/tools/performance/frame_rate/index.html
new file mode 100644
index 0000000000..5e0c776482
--- /dev/null
+++ b/files/zh-cn/tools/performance/frame_rate/index.html
@@ -0,0 +1,70 @@
+---
+title: 帧率
+slug: Tools/Performance/Frame_rate
+translation_of: Tools/Performance/Frame_rate
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="summary">
+<p>帧率是网站响应能力的指标。 较低或不一致的帧率可能会使网站显得响应慢或卡死，从而带来不良的用户体验。</p>
+
+<p>60 fps 的帧率是站点流畅展示的目标，因此，为响应某些事件所需的所有更新，您需要 16.7 ms 的时间预算。</p>
+
+<p>“性能”工具中的帧率图显示了录制过程中的帧率。 它可以快速指出您的站点可能出现问题的位置，使您可以使用其他工具进行更深入的分析。</p>
+</div>
+
+<h2 id="帧率和响应">帧率和响应</h2>
+
+<p>帧率是视频设备可以产生图像（或帧）的速率。 电影和游戏最熟悉它，但现在已广泛用作网站和 Web 应用程序的性能指标。</p>
+
+<p>在网络性能中，帧封装了浏览器为了更新和重绘屏幕而需要做的工作。 帧率最明显地适用于动画：如果帧率太低，则动画将看起来有抖动，而更快的帧率将使得动画更流畅。 但是，当用户与网站交互时，帧率也可以作为衡量网站响应能力的常用指标。</p>
+
+<p>例如，如果将鼠标移到某个页面元素上触发了一些 JavaScript，这些 JavaScript 改变了元素的外观，并触发了重排和重绘，那么所有这些工作都需要在该帧中完成。 如果浏览器处理该帧花费的时间太长，那么浏览器将显示暂时无响应（卡顿）。</p>
+
+<p>同样的，如果页面滚动涉及很多复杂的页面更新，并且浏览器无法保持可接受的帧率，则滚动页面将显得缓慢或卡死。</p>
+
+<p>通常，较高且一致的帧率将使用户与站点的交互更加舒服。</p>
+
+
+
+<div class="note">
+<p>60 fps 的帧率被认为是实现流畅显示的目标，因此，为响应某些事件而需要同步进行的所有更新，需要在 16.7 ms 内完成。</p>
+
+<p>但是，一致性尤为重要：如果您无法提供 60 fps，则最好以更低的速率连续提供更好的帧率，并避免帧速率突然下降而导致站点假死。</p>
+</div>
+
+<h2 id="帧率图">帧率图</h2>
+
+<p>可以在“性能”工具的“<a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Performance/UI_Tour#Recording_overview">录制概览</a>”中找到帧率图。 当浏览器完成一帧时需要花费一个时间戳，并使用它来跟踪记录过程中的帧率。</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11025/perf-frame-rate.png" style="display: block; height: 66px; margin-left: auto; margin-right: auto; width: 900px;">x 轴是全部周期内的时间，共有三个注解：最大帧率，平均帧率和最低帧率。</p>
+
+
+
+
+
+<h2 id="使用帧率图">使用帧率图</h2>
+
+<p>帧率图的最大的价值在于，它和 <a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Web_Console">Web 控制台</a>一样，可以快速指出您的站点可能出现问题的位置，从而使您可以使用其他工具进行更深入的分析。 例如，这是性能文件的屏幕截图：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11023/perf-fr-waterfall.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>您可以看到平均帧率在一定程度上是正常的，但是有三个点，帧率会崩溃数 10 毫秒。 对于页面中正在播放的任何动画，这无疑会引起明显的停顿。</p>
+
+
+
+<p>帧率图与位于其直接上方的<a href="/zh-CN/docs/Tools/Performance/UI_Tour#Waterfall_overview">瀑布摘要</a>相关，并且可以看到帧率的前两个下降与橙色条形相关，这是花费在执行JavaScript上的时间。</p>
+
+
+
+<p>如果我们从记录的这些片段中选择一个，则其下方的主<a href="/zh-CN/docs/Tools/Performance/Waterfall">瀑布视图</a>将会把它放大，然后我们可以看到导致问题的函数：</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11027/perf-zoom.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+
+
+<p>我们有一个来自 click 事件的 JavaScript 函数，该函数会将主线程阻塞了 170 毫秒。</p>
+
+<p>但是，是哪个功能呢？ 切换到<a href="/zh-CN/docs/Tools/Performance/Flame_Chart">火焰图</a>查看当时的调用堆栈：<img alt="" src="https://mdn.mozillademos.org/files/11021/perf-fr-flame-chart.png" style="display: block; height: 413px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>出问题的函数称是  <code>doPointlessComputations()</code>，它在 “ main.js” 中定义。 要解决此问题，我们可以考虑将其拆分为多个部分，然后在 <code><a href="/zh-CN/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a></code> 中运行这些部分，甚至在 <a href="/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers">worker</a> 中运行整个函数。 <a href="/zh-CN/docs/Tools/Performance/Scenarios/Intensive_JavaScript">密集型 JavaScript</a> 文章展示了哪些策略可以来解决由长时间运行的同步 JavaScript 引起的响应性问题。</p>
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>
diff --git a/files/zh-cn/tools/performance/ui_tour/index.html b/files/zh-cn/tools/performance/ui_tour/index.html
new file mode 100644
index 0000000000..7b77de46ff
--- /dev/null
+++ b/files/zh-cn/tools/performance/ui_tour/index.html
@@ -0,0 +1,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>
diff --git a/files/zh-cn/tools/performance/waterfall/index.html b/files/zh-cn/tools/performance/waterfall/index.html
new file mode 100644
index 0000000000..331bc730f8
--- /dev/null
+++ b/files/zh-cn/tools/performance/waterfall/index.html
@@ -0,0 +1,482 @@
+---
+title: Waterfall
+slug: Tools/Performance/Waterfall
+translation_of: Tools/Performance/Waterfall
+---
+<div>{{ToolsSidebar}}</div>
+
+<div class="summary">
+<p><font><font>通过瀑布流，您可以了解浏览器在运行网站或应用程序时所做的各种事情。</font><font>它的基础是浏览器在运行网站时所做的事情可以分为各种类型 - 运行 JavaScript，更新布局等等 - 而且在任何时候，浏览器都在做这些事情之一。</font></font></p>
+
+<p><font><font>因此，如果您看到性能问题的迹象 - 例如帧速下降，您可以前往瀑布流查看浏览器在录制过程中正在进行的操作。</font></font></p>
+
+<div class="summary"></div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10951/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p>
+
+<p><font><font>沿着 X 轴是时间。</font><font>记录的操作（称为标记）显示为水平条，以瀑布流形式显示，以反映浏览器执行的连续性。</font></font></p>
+
+<p><font><font>选择标记后，您会在右侧的侧边栏中看到更多关于它的信息。</font><font>这包括标记的持续时间以及特定于</font></font><a href="/en-US/docs/Tools/Performance/Waterfall#Markers"><font><font>标记类型的</font></font></a><font><font>更多信息</font><font>。</font></font></p>
+
+<h2 id="标记"><a id="timeline-color-coding" name="timeline-color-coding"></a><font><font>标记</font></font></h2>
+
+<p><font><font>操作标记用颜色标记和标记。</font><font>记录下列操作：</font></font></p>
+
+<table class="fullwidth-table standard-table">
+ <thead>
+  <tr>
+   <th scope="col" style="width: 20%;"><font><font>名称和说明</font></font></th>
+   <th scope="col"><font><font>颜色</font></font></th>
+   <th scope="col"><font><font>详细资料</font></font></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td style="width: 40%;">
+    <p><a id="DOM_Event_Marker" name="DOM_Event_Marker"><strong><font><font>DOM 事件</font></font></strong></a></p>
+
+    <p><font><font>为响应 DOM 事件而执行的 JavaScript 代码。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td>
+   <td style="width: 45%;">
+    <dl>
+     <dt><font><font>事件类型</font></font></dt>
+     <dd><font><font>例如，“点击”或“消息”。</font></font></dd>
+    </dl>
+
+    <dl>
+     <dt><font><font>活动阶段</font></font></dt>
+     <dd><font><font>例如，“目标”或“捕获”。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><font><font>在页面中执行的 JavaScript 函数标有该函数被调用的原因：</font></font></p>
+
+    <p><strong><font><font>脚本标记</font></font><br>
+     <font><font>setInterval </font></font><br>
+     <font><font>setTimeout </font></font><br>
+     <font><font>requestAnimationFrame </font></font><br>
+     <font><font>Promise回调</font></font><br>
+     <font><font>Promise Init </font></font><br>
+     <font><font>Worker </font></font><br>
+     <font><font>JavaScript URI </font></font><br>
+     <font><font>事件处理程序</font></font></strong></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>堆</font></font></dt>
+     <dd><font><font>调用堆栈，并链接到函数。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>解析 HTML</font></font></strong></p>
+
+    <p><font><font>花费时间解析页面的 HTML。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>堆</font></font></dt>
+     <dd><font><font>调用堆栈，并链接到函数。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>解析 XML</font></font></strong></p>
+
+    <p><font><font>花费时间解析页面的 XML。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>堆</font></font></dt>
+     <dd><font><font>调用堆栈，并链接到函数。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>重新计算样式</font></font></strong></p>
+
+    <p><font><font>计算适用于页面元素的计算样式。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>Restyle 提示</font></font></dt>
+     <dd><font><font>指示需要什么样的重新列表的字符串。</font><font>提示可能是以下任何一种：</font></font><br>
+     <font><font>自子</font></font><br>
+     <font><font>树</font></font><br>
+     <font><font>LaterSiblings </font></font><br>
+     <font><font>CSSTransitions </font></font><br>
+     <font><font>CSSAnimations </font></font><br>
+     <font><font>SVGAttrAnimations </font></font><br>
+     <font><font>StyleAttribute </font></font><br>
+     <font><font>StyleAttribute_Animations </font></font><br>
+     <font><font>Force </font></font><br>
+     <font><font>ForceDescendants</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>布局</font></font></strong></p>
+
+    <p><font><font>计算页面元素的位置和大小。</font><font>该操作有时称为“回流”。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong>绘制</strong></p>
+
+    <p><font><font>将像素绘制到屏幕上。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10705/green.png" style="height: 21px; width: 60px;"></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>垃圾回收</font></font></strong></p>
+
+    <p><a href="/en-US/docs/Tools/Performance/Waterfall#Garbage_collection"><font><font>垃圾回收事件</font></font></a><font><font>。</font><font>非增量 GC 事件标记为“（非增量）”。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>原因</font></font></dt>
+     <dd><font><font>表示 GC 执行原因的字符串。</font></font></dd>
+     <dt><font><font>非增量原因</font></font></dt>
+     <dd><font><font>如果 GC 事件是非增量的，则该字符串指示执行非增量 GC 的原因。</font></font></dd>
+    </dl>
+
+    <div class="geckoVersionNote">
+    <p><font><font>Firefox 46 中的新增功能：如果GC 事件是由分配压力引起的，则会显示一个链接，标记为“显示分配触发器”。</font><font>点击链接可查看导致此 GC 事件的分配配置文件。</font></font></p>
+
+    <p><font><font>有关</font><font>更多详细信息，</font><font>请参阅</font></font><a href="/en-US/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection"><font><font>分配和垃圾收集</font></font></a><font><font>。</font></font></p>
+    </div>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>周期回收</font></font></strong></p>
+
+    <p><font><font>回收 C ++ 引用计数的数据结构。</font></font></p>
+
+    <p><font><font>像垃圾回收一样，但是用于C ++对象。</font><font>请参阅 </font></font><a href="http://blog.kylehuey.com/post/27564411715/cycle-collection"><font><font>Kyle Huey 关于周期收集的博客文章</font></font></a><font><font>。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>类型</font></font></dt>
+     <dd><font><font>始终“回收”。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>CC 图减少</font></font></strong></p>
+
+    <p><font><font>循环回收的准备/预优化。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>类型</font></font></dt>
+     <dd><font><font>总是“忘记滑雪”。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong>控制台</strong></p>
+
+    <p><font><font>匹配 </font></font><code>console.time() </code><font><font>与</font><font>之间的时间间隔</font></font><code>console.timeEnd()</code><font><font>。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10955/gray.png" style="height: 54px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>计时器名称</font></font></dt>
+     <dd><font><font>参数传递给 </font></font><code>console </code><font><font>函数。</font></font></dd>
+     <dt><font><font>在开始堆叠</font></font></dt>
+     <dd><font><font>调用堆栈 </font></font><code>console.time() </code><font><font>，并链接到函数。</font></font></dd>
+     <dt><font><font>在最后堆叠</font></font></dt>
+     <dd><font><font>（Firefox 41 中的新功能）。</font><font>在堆栈调用堆栈</font></font><code>console.timeEnd()</code><font><font>。</font><font>如果这在a的回调中 </font></font><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code><font><font>，这也会显示</font></font><a href="/en-US/docs/Tools/Performance/Waterfall#Async_stack"><font><font>“异步堆栈”</font></font></a><font><font>。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>时间戳</font></font></strong></p>
+
+    <p><code><a href="/en-US/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code><font><font>。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/10953/blue.png" style="height: 54px; width: 60px;"></td>
+   <td>
+    <dl>
+     <dt><font><font>标签</font></font></dt>
+     <dd><font><font>该论据传递给 </font></font><code>timeStamp()</code><font><font>。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>DOMContentLoaded</font></font></strong></p>
+
+    <p><font><font>文档的 </font></font><code><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a> </code><font><font>事件。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/12191/red.png" style="height: 21px; width: 60px;"></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>加载</font></font></strong></p>
+
+    <p><font><font>文档的 </font></font><code><a href="/en-US/docs/Web/Events/load">load</a> </code><font><font>事件。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/12193/blue.png" style="height: 21px; width: 60px;"></td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>主线程中的 worker 事件</font></font></strong></p>
+
+    <p><font><font>主线程向 worker 发送消息或从 worker 接收消息时显示。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/12195/orange2.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <p><font><font>之一：</font></font></p>
+
+    <dl>
+     <dt><font><font>在主线程上序列化数据</font></font></dt>
+     <dd><font><font>主线程正在序列化要发送给工作人员的消息。</font></font></dd>
+     <dt><font><font>反序列化主线程中的数据</font></font></dt>
+     <dd><font><font>主线程反序列化从工作人员收到的消息。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+  <tr>
+   <td>
+    <p><strong><font><font>worker 线程中的 worker 事件</font></font></strong></p>
+
+    <p><font><font>当 worker 从主线程收到消息或向主线程发送消息时显示。</font></font></p>
+   </td>
+   <td><img alt="" src="https://mdn.mozillademos.org/files/12197/orange2-hollow.png" style="height: 21px; width: 60px;"></td>
+   <td>
+    <p><font><font>之一：</font></font></p>
+
+    <dl>
+     <dt><font><font>在 worker 中序列化数据</font></font></dt>
+     <dd><font><font>工作人员正在序列化要发送到主线程的消息。</font></font></dd>
+     <dt><font><font>在 worker 中反序列化数据</font></font></dt>
+     <dd><font><font>工作人员正在反序列化从主线程收到的消息。</font></font></dd>
+    </dl>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<p><font><font>瀑布流工具中的标记及其颜色与</font></font><a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview"><font><font>瀑布流概述中的相同</font></font></a><font><font>，因此可以很容易地从一个到另一个进行关联。</font></font></p>
+
+<h3 id="过滤标记"><font><font>过滤标记</font></font></h3>
+
+<p><font><font>您可以使用</font></font><a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar"><font><font>工具栏中</font></font></a><font><font>的按钮控制显示哪些标记</font><font>：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13238/perf-markers.png" style="display: block; height: 694px; margin-left: auto; margin-right: auto; width: 799px;">​​​​​</p>
+
+<h2 id="瀑布流模式"><font><font>瀑布流模式</font></font></h2>
+
+<p><font><font>您在瀑布流中看到的内容完全取决于您的网站所做的事情：JavaScript 网站会有很多橙色，而视觉动态网站会有很多紫色和绿色。</font><font>但有一些常见的模式可以提醒您可能出现的性能问题。</font></font></p>
+
+<h3 id="渲染瀑布流"><font><font>渲染瀑布流</font></font></h3>
+
+<p><font><font>您在瀑布流视图中经常会看到的一种模式如下所示：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10711/perf-timeline-waterfall.png" style="display: block; height: 286px; margin-left: auto; margin-right: auto; width: 727px;"></p>
+
+<p><font><font>这是浏览器用于响应某些事件更新页面的基本算法的可视化：</font></font></p>
+
+<ol>
+ <li><strong><font><font>JavaScript 函数调用</font></font></strong><font><font>：某些事件（例如 DOM 事件）会导致页面中的某些JavaScript 运行。</font><font>JavaScript 改变了页面的一些 DOM 或 CSSOM。</font></font></li>
+ <li><strong><font><font>重新计算样式</font></font></strong><font><font>：如果浏览器认为页面元素的计算样式已更改，则必须重新计算它们。</font></font></li>
+ <li><strong><font><font>布局</font></font></strong><font><font>：接下来，浏览器使用计算的样式来确定元素的位置和几何形状。</font><font>此操作被标记为“布局”，但有时也称为“回流”。</font></font></li>
+ <li><strong><font><font>Paint</font></font></strong><font><font>：最后，浏览器需要重新绘制元素到屏幕上。</font><font>最后一步不是按照这个顺序显示的：页面可以分成多个图层，这些图层被独立绘制，然后在称为“组合”的过程中合并。</font></font></li>
+</ol>
+
+<p><font><font>该顺序需要匹配一帧，因为屏幕在完成之前不会更新。</font><font>人们普遍接受每秒60帧是动画显示平滑的速率。</font><font>对于每秒60帧的速率，浏览器会以16.7毫秒的时间执行完整的流程。</font></font></p>
+
+<p><font><font>重要的是响应能力，浏览器​​并不总是执行每一步：</font></font></p>
+
+<ul>
+ <li><font><font><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS 动画</a> </font></font><font><font>更新页面，而无需运行任何 JavaScript。</font></font></li>
+ <li><font><font>并非所有的 CSS 属性更改都会导致重排。修改</font><font>可以改变对象的几何形状和位置的属性，例如 </font></font><code><a href="/en-US/docs/Web/CSS/width">width</a></code><font><font>，</font></font><code><a href="/en-US/docs/Web/CSS/display">display</a></code><font><font>，</font></font><code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code><font><font>，或 </font></font><code><a href="/en-US/docs/Web/CSS/top">top</a></code><font><font>，将引起回流。</font><font>但是，修改不会改变几何或位置的属性，例如 </font></font><code><a href="/en-US/docs/Web/CSS/color">color</a> </code><font><font>或 </font></font><code><a href="/en-US/docs/Web/CSS/opacity">opacity</a> </code><font><font>不会。</font></font></li>
+ <li><font><font>并非所有 CSS 属性更改都会导致重新绘制。</font><font>特别是，如果使用该</font></font><code><a href="/en-US/docs/Web/CSS/transform">transform</a> </code><font><font>属性</font><font>为元素设置动画效果</font><font>，则浏览器将为已转换的元素使用单独的图层，并且在元素移动时甚至不必重绘：元素的新位置在组合中处理。</font></font></li>
+</ul>
+
+<p><font><font>该</font></font><a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties"><font><font>动画效果的 CSS 属性</font></font></a><font><font>介绍了如何为不同的CSS属性设置动画进而赋予不同的性能结果，与瀑布流如何能够帮助发出信号。</font></font></p>
+
+<h3 id="阻塞_JavaScript"><font><font>阻塞 JavaScript</font></font></h3>
+
+<p><font><font>默认情况下，站点的 JavaScript 在与浏览器用于布局更新，重绘，DOM 事件等相同的线程中执行。</font><font>这意味着长时间运行的 JavaScript 函数可能会导致无响应（无效）：动画可能不平滑，或者该网站甚至可能会冻结。</font></font></p>
+
+<p><font><font>同时使用帧速率工具和瀑布流，很容易看到长时间运行的 JavaScript 引起响应问题的时间。</font><font>在下面的屏幕截图中，我们放大了导致帧频下降的 JS 函数：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10973/perf-js-blocking-waterfall.png" style="display: block; height: 432px; margin-left: auto; margin-right: auto; width: 1128px;"></p>
+
+<p><font><font>在</font></font><font><font><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">密集的 JavaScript</a> </font></font><font><font>文章显示了瀑布流如何突出造成长期的 JavaScript 函数响应的问题，以及如何使用异步方法来保持主线程响应。</font></font></p>
+
+<h3 id="昂贵的绘制"><font><font>昂贵的绘制</font></font></h3>
+
+<p><font><font>某些绘画效果（例如 </font></font><code><a href="/en-US/docs/Web/CSS/box-shadow">box-shadow</a></code><font><font>）可能很昂贵，尤其是在浏览器必须在每一帧中计算它们的过渡中应用它们时。</font><font>如果您看到帧频下降，尤其是在图形密集型操作和转换期间，请检查瀑布流是否有长绿色标记。</font></font></p>
+
+<h3 id="垃圾回收"><font><font>垃圾回收</font></font></h3>
+
+<p><font><font>瀑布流中的红色标记表示垃圾回收（GC）事件，其中 </font></font><font><font><a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> </font></font><font><font>（Firefox 中的 JavaScript 引擎）遍历堆寻找不再可及的内存并随后释放它。</font><font>GC 与性能相关，因为它在运行时必须暂停 JavaScript 引擎，以便程序暂停并且完全无响应。</font></font></p>
+
+<p><font><font>为了减少暂停的时间，SpiderMonkey 实现了</font></font><em><font><font>增量 GC</font></font></em><font><font>：这意味着它可以以相当小的增量执行垃圾回收，让程序在两者之间运行。</font><font>但有时候，它需要执行完整的非增量回收，程序必须等待它完成。</font></font></p>
+
+<ul>
+</ul>
+
+<p><font><font>在试图避免 GC 事件，尤其是非增量 GC 事件时，明智的做法是不尝试针对JavaScript 引擎的特定实现进行优化。</font><font>SpiderMonkey 使用一套复杂的启发式方法来确定何时需要 GC，何时需要非增量 GC。</font><font>一般来说，虽然：</font></font></p>
+
+<ul>
+ <li><font><font>GC 在分配大量内存时需要</font></font></li>
+ <li><font><font>当内存分配速率足够高以至于 SpiderMonkey 在增量GC期间可能会耗尽内存时，通常需要非增量GC</font></font></li>
+</ul>
+
+<p><font><font>当瀑布流记录 GC 标记时，它表示：</font></font></p>
+
+<ul>
+ <li><font><font>GC 是否是增量式的</font></font></li>
+ <li><font><font>GC 执行的原因</font></font></li>
+ <li><font><font>如果 GC 是非递增的，则它是非递增的原因</font></font></li>
+ <li><font><font>从 Firefox 46 开始，如果 GC 事件是由分配压力引起的，则会显示一个链接，标记为“显示分配触发器”。</font><font>点击链接可查看导致此 GC 事件的分配配置文件。</font><font>有关</font><font>更多详细信息，</font><font>请参阅</font></font><font><font><a href="/en-US/docs/Tools/Performance/Allocations#Allocations_and_garbage_collection">分配和垃圾</a>回收</font></font><font><font>。</font></font></li>
+</ul>
+
+<h2 id="使用控制台_API_添加标记"><font><font>使用控制台 API 添加标记</font></font></h2>
+
+<p><font><font>两个标记直接由</font></font><font><font><a href="/en-US/docs/Web/API/Console">控制台 API</a> </font></font><font><font>调用</font><font>控制</font><font>：“控制台”和“时间戳”。</font></font></p>
+
+<h3 id="控制台标记"><font><font>控制台标记</font></font></h3>
+
+<p><font><font>这些使您可以标记录制的特定部分。</font></font></p>
+
+<p><font><font>要制作控制台标记，请</font></font><font><font>在该部分的开始处调用</font></font><code>console.time() </code><font><font>结尾处</font><font>调用</font></font><code>console.timeEnd()</code><font><font>。</font><font>这些函数带有一个用于命名该部分的参数。</font></font></p>
+
+<p><font><font>例如，假设我们有这样的代码：</font></font></p>
+</div>
+
+<pre class="brush: js notranslate">var iterations = 70;
+var multiplier = 1000000000;
+
+function calculatePrimes() {
+
+  console.time("calculating...");
+
+  var primes = [];
+  for (var i = 0; i &lt; iterations; i++) {
+    var candidate = i * (multiplier * Math.random());
+    var isPrime = true;
+    for (var c = 2; c &lt;= Math.sqrt(candidate); ++c) {
+      if (candidate % c === 0) {
+          // not prime
+          isPrime = false;
+          break;
+       }
+    }
+    if (isPrime) {
+      primes.push(candidate);
+    }
+  }
+
+  console.timeEnd("calculating...");
+
+  return primes;
+}</pre>
+
+<p><font><font>瀑布流的输出将如下所示：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10967/perf-console-time.png" style="display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1192px;"></p>
+
+<p><font><font>标记用您传递给的参数 </font></font><code>console.time() </code><font><font>进行标记，当您选择标记时，可以在右侧边栏中看到程序堆栈。</font></font></p>
+
+<h4 id="异步堆栈"><font><font>异步堆栈</font></font></h4>
+
+<p class="geckoVersionNote"><font><font>Firefox 中的新功能41。</font></font></p>
+
+<p><font><font>从 Firefox 41 开始，右侧侧边栏也会在结尾显示堆栈：即在 </font></font><code>console.timeEnd()</code><font><font>被调用时。</font><font>如果 </font></font><code>console.timeEnd() </code><font><font>从 a 的解析中被调用 </font></font><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code><font><font>，它也会显示“（Async：Promise）”​​，在这个下面它将显示“异步堆栈”：也就是说，在承诺的地方调用堆栈。</font></font></p>
+
+<p><font><font>例如，考虑这样的代码：</font></font></p>
+
+<pre class="brush: js notranslate">var timerButton = document.getElementById("timer");
+timerButton.addEventListener("click", handleClick, false);
+
+function handleClick() {
+  console.time("timer");
+  runTimer(1000).then(timerFinished);
+}
+
+function timerFinished() {
+  console.timeEnd("timer");
+  console.log("ready!");
+}
+
+function runTimer(t) {
+  return new Promise(function(resolve) {
+    setTimeout(resolve, t);
+  });
+}</pre>
+
+<p><font><font>瀑布流将显示一个标志物之间的期间 </font></font><code>time() </code><font><font>和 </font></font><code>timeEnd()</code><font><font>，如果你选择它，你会看到侧边栏的异步栈：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11179/async-stack.png" style="display: block; height: 378px; margin-left: auto; margin-right: auto; width: 352px;"></p>
+
+<h3 id="时间戳标记"><font><font>时间戳标记</font></font></h3>
+
+<p><font><font>时间戳使您可以在录制中标记一个瞬间。</font></font></p>
+
+<p><font><font>要制作时间戳记标记，请调用 </font></font><code><a href="/en-US/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code><font><font>。</font><font>您可以传递参数来标记时间戳。</font></font></p>
+
+<p><font><font>例如，假设我们调整上面的代码以每循环 10 次迭代一次时间戳，并用迭代号标记：</font></font></p>
+
+<pre class="brush: js notranslate">var iterations = 70;
+var multiplier = 1000000000;
+
+function calculatePrimes() {
+  console.time("calculating...");
+
+  var primes = [];
+  for (var i = 0; i &lt; iterations; i++) {
+
+    if (i % 10 == 0) {
+      console.timeStamp(i.toString());
+    }
+
+    var candidate = i * (multiplier * Math.random());
+    var isPrime = true;
+    for (var c = 2; c &lt;= Math.sqrt(candidate); ++c) {
+      if (candidate % c === 0) {
+          // not prime
+          isPrime = false;
+          break;
+       }
+    }
+    if (isPrime) {
+      primes.push(candidate);
+    }
+  }
+  console.timeEnd("calculating...");
+  return primes;
+}</pre>
+
+<p><font><font>在瀑布现在你会看到这样的东西：</font></font></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10971/perf-timestamp.png" style="display: block; height: 530px; margin-left: auto; margin-right: auto; width: 1192px;"></p>