path: root/files/ru/tools/performance/waterfall/index.html

---
title: Waterfall
slug: Tools/Производительность/Waterfall
translation_of: Tools/Performance/Waterfall
---
<div>{{ToolsSidebar}}</div><div class="summary">
<p>Водопад (Waterfall) дает вам представление о различных процессах, которые происходят внутри браузера, когда вы открывайте ваш сайт или запускаете ваше приложение. Он основан на идее разделения всех происходящих внутри браузера процессов на различные типы  - запуск JavaScript, обновление layout и так далее - и что в любой момент времени браузрер выполняет один из этих процессов.</p>

<p>Поэтому если вы увидите признаки проблем с производительностью  - например, падения частоты кадров - вы можете запустить Waterfall, чтобы увидеть, что делает браузер в этот момент.</p>
</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>Ось X это ось времени. Записанные операции и вызванные маркеры отображаются в виде горизонтальных прямоуголников, расположенных в виде водопада, чтобы подчеркнуть последовательность выполнения внутри браузера.</p>

<p>При выборе маркера вы увидите подробную информацию о нем на панели справа. В этой панели вы сможете узнать продолжительность и другую специфичную для <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">конктреного типа</a> процесса инофрмацию .</p>

<h2 id="Markers"><a id="timeline-color-coding" name="timeline-color-coding"></a>Markers</h2>

<p>The markers for operations are color-coded and labeled. The following operations are recorded:</p>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col" style="width: 20%;">Name and description</th>
   <th scope="col">Color</th>
   <th scope="col">Detailed information</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td style="width: 40%;">
    <p><a id="DOM_Event_Marker" name="DOM_Event_Marker"><strong>DOM Event</strong></a></p>

    <p>JavaScript code that's executed in response to a DOM event.</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>Event Type</dt>
     <dd>For example, "click" or "message".</dd>
    </dl>

    <dl>
     <dt>Event Phase</dt>
     <dd>For example, "Target" or "Capture".</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p>JavaScript functions executed in the page are labeled with the reason the function was called:</p>

    <p><strong>Script Tag<br>
     setInterval<br>
     setTimeout<br>
     requestAnimationFrame<br>
     Promise Callback<br>
     Promise Init<br>
     Worker<br>
     JavaScript URI<br>
     Event Handler</strong></p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td>
   <td>
    <dl>
     <dt>Stack</dt>
     <dd>Call stack, with links to functions.</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Parse HTML</strong></p>

    <p>Time spent parsing the page's HTML.</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td>
   <td>
    <dl>
     <dt>Stack</dt>
     <dd>Call stack, with links to functions.</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Parse XML</strong></p>

    <p>Time spent parsing the page's XML.</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td>
   <td>
    <dl>
     <dt>Stack</dt>
     <dd>Call stack, with links to functions.</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Recalculate Style</strong></p>

    <p>Calculating the computed styles that apply to page elements.</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td>
   <td>
    <dl>
     <dt>Restyle Hint</dt>
     <dd>A string indicating what kind of restyling is needed. The hint may be any of:<br>
     Self<br>
     Subtree<br>
     LaterSiblings<br>
     CSSTransitions<br>
     CSSAnimations<br>
     SVGAttrAnimations<br>
     StyleAttribute<br>
     StyleAttribute_Animations<br>
     Force<br>
     ForceDescendants</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Layout</strong></p>

    <p>Calculating the position and size of page elements. This operation is sometimes called "reflow".</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>Paint</strong></p>

    <p>Drawing pixels to the screen.</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>GC Event</strong></p>

    <p><a href="/en-US/docs/Tools/Performance/Waterfall#Garbage_collection">Garbage collection event</a>. Non-incremental GC events are labeled "(Non-incremental)".</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td>
   <td>
    <dl>
     <dt>Reason</dt>
     <dd>A string the indicating the reason GC was performed.</dd>
     <dt>Non-incremental Reason</dt>
     <dd>If the GC event was non-incremental, a string the indicating the reason non-incremental GC was performed.</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Console</strong></p>

    <p>The period between matching calls to <code>console.time()</code> and <code>console.timeEnd()</code>.</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10955/gray.png" style="height: 54px; width: 60px;"></td>
   <td>
    <dl>
     <dt>Timer name</dt>
     <dd>The argument passed to the <code>console</code> functions.</dd>
     <dt>Stack at start</dt>
     <dd>Call stack <code>console.time()</code>, with links to functions.</dd>
     <dt>Stack at End</dt>
     <dd>(New in Firefox 41). Call stack at <code>console.timeEnd()</code>. If this is inside a callback from a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, this will also show the <a href="/en-US/docs/Tools/Performance/Waterfall#Async_stack">"Async stack"</a>.</dd>
    </dl>
   </td>
  </tr>
  <tr>
   <td>
    <p><strong>Timestamp</strong></p>

    <p>A single call to <code><a href="/en-US/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code>.</p>
   </td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/10953/blue.png" style="height: 54px; width: 60px;"></td>
   <td>
    <dl>
     <dt>Label</dt>
     <dd>The argument passed to <code>timeStamp()</code>.</dd>
    </dl>
   </td>
  </tr>
 </tbody>
</table>

<p>The markers, and their colors, are the same in the Waterfall tool as in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">Waterfall overview</a>, making is easy to correlate from one to the other.</p>

<h3 id="Filtering_markers">Filtering markers</h3>

<p>You can control which markers are displayed using a button in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">Toolbar</a>:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10975/toolbar-filter.png" style="display: block; height: 72px; margin-left: auto; margin-right: auto; width: 1000px;"></p>

<h2 id="Waterfall_patterns">Waterfall patterns</h2>

<p>Exactly what you'll see in the Waterfall is very dependent on the kind of thing your site is doing: JavaScript-heavy sites will have a lot of orange, while visually dynamic sites will have a lot of purple and green. But there are common patterns which can alert you to possible performance problems.</p>

<h3 id="Rendering_waterfall">Rendering waterfall</h3>

<p>One pattern that you'll often see in the Waterfall view is something like this:</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>This is a visualization of the basic algorithm the browser uses to update the page in response to some event:</p>

<ol>
 <li><strong>JavaScript Function Call</strong>: some event - for example, a DOM event - causes some JavaScript in the page to run. The JavaScript changes some of the page's DOM or CSSOM.</li>
 <li><strong>Recalculate Style</strong>: if the browser thinks the computed styles for page elements have changed, it must then recalculate them.</li>
 <li><strong>Layout</strong>: next, the browser uses the computed styles to figure out the position and geometry for the elements. This operation is labeled "layout" but is also sometimes called "reflow".</li>
 <li><strong>Paint</strong>: finally, the browser needs to repaint the elements to the screen. One last step is not shown in this sequence: the page may be split into layers, which are painted independently and then combined in a process called "Composition".</li>
</ol>

<p>This sequence needs to fit into a single frame, since the screen isn't updated until it is complete. It's commonly accepted that 60 frames per second is the rate at which animations will appear smooth. For a rate of 60 frames per second, that gives the browser 16.7 milliseconds to execute the complete flow.</p>

<p>Importantly for responsiveness, the browser doesn't always have to go through every step:</p>

<ul>
 <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS animations</a> update the page without having to run any JavaScript.</li>
 <li>Not all CSS property changes cause a reflow. Changing properties that can alter an object's geometry and position, such as <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, <code><a href="/en-US/docs/Web/CSS/display">display</a></code>, <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, or <code><a href="/en-US/docs/Web/CSS/top">top</a></code>, will cause a reflow. However, changing properties that don't alter geometry or position, such as <code><a href="/en-US/docs/Web/CSS/color">color</a></code> or <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code>, will not.</li>
 <li>Not all CSS property changes cause a repaint. In particular, if you animate an element using the <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> property, the browser will use a separate layer for the transformed element, and doesn't even have to repaint when the element is moved: the new position of the element is handled in composition.</li>
</ul>

<p>The <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animating CSS properties</a> article shows how animating different CSS properties can give different performance outcomes, and how the Waterfall can help signal that.</p>

<h3 id="Blocking_JavaScript">Blocking JavaScript</h3>

<p>By default, a site's JavaScript is executed in the same thread that the browser uses for layout updates, repaints, DOM events, and so on. This means that long-running JavaScript functions can cause unresponsiveness (jank): animations may not be smooth, or the site might even freeze.</p>

<p>Using the frame rate tool and the Waterfall together, it's easy to see when long-running JavaScript is causing responsiveness problems. In the screenshot below, we've zoomed in on a JS function that's caused a drop in the frame rate:</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>The <a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript</a> article shows how the Waterfall can highlight responsiveness problems caused by long JavaScript functions, and how you can use asynchronous methods to keep the main thread responsive.</p>

<h3 id="Expensive_paints">Expensive paints</h3>

<p>Some paint effects, such as <code><a href="/en-US/docs/Web/CSS/box-shadow">box-shadow</a></code>, can be expensive, especially if you are applying them in a transition where the browser has to calculate them in every frame. If you're seeing drops in the frame rate, especially during graphically-intensive operations and transitions, check the Waterfall for long green markers.</p>

<h3 id="Garbage_collection">Garbage collection</h3>

<p>Red markers in the Waterfall represent garbage collection (GC) events, in which <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> (the JavaScript engine in Firefox) walks the heap looking for memory that's no longer reachable and subsequently releasing it. GC is relevant to performance because while it's running the JavaScript engine must be paused, so your program is suspended and will be completely unresponsive.</p>

<p>To help reduce the length of pauses, SpiderMonkey implements <em>incremental GC</em>: this means that it can perform garbage collection in fairly small increments, letting the program run in between. Sometimes, though, it needs to perform a full non-incremental collection, and the program has to wait for it to finish.</p>

<p>When the Waterfall records a GC marker it indicates:</p>

<ul>
 <li>whether the GC was incremental or not</li>
 <li>the reason the GC was performed</li>
 <li>if the GC was non-incremental, the reason it was non-incremental</li>
</ul>

<p>In trying to avoid GC events, and especially non-incremental GC events, it's wise not to try to optimize for the specific implementation of the JavaScript engine. SpiderMonkey uses a complex set of heuristics to determine when GC is needed, and when non-incremental GC in particular is needed. In general, though:</p>

<ul>
 <li>GC is needed when a lot of memory is being allocated</li>
 <li>non-incremental GC is usually needed when the memory allocation rate is high enough that SpiderMonkey may run out of memory during incremental GC</li>
</ul>

<h2 id="Adding_markers_with_the_console_API">Adding markers with the console API</h2>

<p>Two markers are directly controlled by <a href="/en-US/docs/Web/API/Console">console API</a> calls: "Console" and "Timestamp".</p>

<h3 id="Console_markers">Console markers</h3>

<p>These enable you to mark a specific section of the recording.</p>

<p>To make a console marker, call <code>console.time()</code> at the start of the section, and <code>console.timeEnd()</code> at the end. These functions take an argument which is used to name the section.</p>

<p>For example, suppose we have code like this:</p>

<pre class="brush: js">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>The Waterfall's output will look something like this:</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>The marker is labeled with the argument you passed to <code>console.time()</code>, and when you select the marker, you can see the program stack in the right-hand sidebar.</p>

<h4 id="Async_stack">Async stack</h4>

<p class="geckoVersionNote">New in Firefox 41.</p>

<p>Starting in Firefox 41, the right-hand sidebar will also show the stack at the end of the period: that is, at the point <code>console.timeEnd()</code> was called. If <code>console.timeEnd()</code> was called from the resolution of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, it will also display "(Async: Promise)", under which it will show the "async stack": that is, the call stack at the point the promise was made.</p>

<p>For example, consider code like this:</p>

<pre class="brush: js">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>The Waterfall will display a marker for the period between <code>time()</code> and <code>timeEnd()</code>, and if you select it, you'll see the async stack in the sidebar:</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="Timestamp_markers">Timestamp markers</h3>

<p>Timestamps enable you to mark an instant in the recording.</p>

<p>To make a timestamp marker, call <code><a href="/en-US/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code>. You can pass an argument to label the timestamp.</p>

<p>For example, suppose we adapt the code above to make a timestamp every 10 iterations of the loop, labeled with the iteration number:</p>

<pre class="brush: js">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>In the Waterfall you'll now see something like this:</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>

<p> </p>