title: Understanding Chrome DevTools Performance.getMetrics() results
body: <p>I'm using puppeteer's page.metrics() which calls the DevTools protocol <a href="https://chromedevtools.github.io/devtools-protocol/tot/Performance#method-getMetrics" rel="noreferrer">Performance.getMetrics()</a> 
  Here is a sample of the returned data :</p>
  
  <pre><code>{
     Timestamp: 672.244221,
     Documents: 3,
     Frames: 2,
     JSEventListeners: 2,
     Nodes: 4116,
     LayoutCount: 3,
     RecalcStyleCount: 2,
     LayoutDuration: 0.136179,
     RecalcStyleDuration: 0.027681,
     ScriptDuration: 0.188817,
     TaskDuration: 0.563811,
     JSHeapUsedSize: 2959520,
     JSHeapTotalSize: 5132288
  }
  </code></pre>
  
  <p>The only documentation i could find for these numbers is in <a href="https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagemetrics" rel="noreferrer">puppeteer's documentation</a>
  and it is basically this:</p>
  
  <blockquote>
    <ul>
    <li>Timestamp  The timestamp when the metrics sample was taken.</li>
    <li>Documents  Number of documents in the page. </li>
    <li>Frames  Number of frames in the page. </li>
    <li>JSEventListeners  Number of events in the page. </li>
    <li>Nodes  Number of DOM nodes in the page.</li>
    <li>LayoutCount  Total number of full or partial page layout.</li>
    <li>RecalcStyleCount  Total number of page style recalculations.</li>
    <li>LayoutDuration  Combined durations of all page layouts.</li>
    <li>RecalcStyleDuration  Combined duration of all page style recalculations. </li>
    <li>ScriptDuration  Combined duration of JavaScript execution. </li>
    <li>TaskDuration  Combined duration of all tasks performed by the browser. </li>
    <li>JSHeapUsedSize  Used JavaScript heap size. </li>
    <li>JSHeapTotalSize  Total JavaScript heap size.</li>
    </ul>
  </blockquote>
  
  <p>I would really like to get more details regarding these numbers, and specifically to answer these questions:</p>
  
  <ol>
  <li><p>TaskDuration is significantly larger then the sum of ScriptDuration, LayoutDuration and RecalculateStyleDuration</p>
  
  <ul>
  <li>Where was the rest of the time wasted ?</li>
  <li>What other measurements i can take to account for that missing time ?</li>
  </ul></li>
  <li><p>What are documents and frames ? </p></li>
  </ol>