How is Loading, Scripting, Rendering, Painting time calculated?

Question

On the Summary tab of Performance panel, total time taken by the browser for each category is displayed -

How are these times calculated? I referred to this SO answer as well as source code and can see that there are some events mapped to each category. I have Chrome performance trace dump and when I calculate the sum total of durations of these events for each category, the numbers don't match.

Can someone please help me with the calculation of these values? Or any other way to programmatically fetch them?

Answer 1

# Update 3

I fully rewrote my code, here's a better solution with comments.

// Import `Puppeteer` library
const Puppeteer = require('puppeteer');

async function CapturePerformanceMetrics(url) {
  // Launch browser and create page
  const Browser = await Puppeteer.launch();
  const Page = await Browser.newPage();

  // Navigate to URL
  await Page.goto(url, { waitUntil: 'networkidle2' });

  // Evaluate Performance Metrics: The function then evaluates performance metrics inside the browser context using `page.evaluate()`. It accesses the `window.performance.timing` object to calculate various timing metrics
  const PerformanceMetrics = await Page.evaluate(() => {
    // Get timing
    const Timing = window.performance.timing;

    // Return loading, scripting, and rendering time
    return {
      LoadingTime: Timing.domContentLoadedEventEnd - Timing.navigationStart, // PageDOMLoaded - BrowserNavigated = Loading Time
      ScriptingTime: Timing.domContentLoadedEventEnd - Timing.domInteractive, // PageDOMLoaded - PageIsFullyParsed = Scripting Time
      RenderingTime: Timing.loadEventEnd - Timing.domInteractive // PageLoaded - PageIsFullyParsed = Rendering Time
    };
  });

  // Print them
  console.log('Loading time:', PerformanceMetrics.LoadingTime.toFixed(2), 'ms');
  console.log('Scripting time:', PerformanceMetrics.ScriptingTime.toFixed(2), 'ms');
  console.log('Rendering time:', PerformanceMetrics.RenderingTime.toFixed(2), 'ms');

  // Close browser
  await Browser.close();
}

// Example usage
const Url = 'https://example.com'; // URL

CapturePerformanceMetrics(Url)
  .then(() => console.log('Performance metrics captured')) // If no issue
  .catch(Error => console.error('Error when capturing performance metrics:', Error)); // If error

Notes

• In the current example https://example.com, there's no script on site, so scripting time would be 0
• I can't find a way to calculate Painting Time