path: root/files/zh-cn/tools/performance/waterfall/index.html

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