React Application Performance Profiling

React Profiler API

import React, { Fragment, unstable_Profiler as Profiler} from "react";

const Movies = ({ movies, addToQueue }) => (
  <Fragment>
    <Profiler id="Movies" onRender={callback}>

• id: Eigenschaft idaus dem Komponentenbaum, Profilerfür den die Änderung festgeschrieben wurde.
• phase: oder mount(wenn der Baum montiert wurde) oder update(wenn der Baum neu gerendert wurde).
• actualDuration: Die Zeit, die zum Rendern eines festen Updates benötigt wird.
• baseDuration: Geschätzte Zeit zum Rendern des gesamten Teilbaums ohne Caching.
• startTime: Die Zeit, zu der React mit dem Rendern dieses Updates begann.
• commitTime: Der Zeitpunkt, zu dem React dieses Update festgeschrieben hat.
• interactions: Viele "Interaktionen" für dieses Update.

const callback = (id, phase, actualTime, baseTime, startTime, commitTime) => {
    console.log(`${id}'s ${phase} phase:`);
    console.log(`Actual time: ${actualTime}`);
    console.log(`Base time: ${baseTime}`);
    console.log(`Start time: ${startTime}`);
    console.log(`Commit time: ${commitTime}`);
}

import React, { Fragment, unstable_Profiler as Profiler} from "react";

render(
  <App>
    <Profiler id="Header" onRender={callback}>
      <Header {...props} />
    </Profiler>
    <Profiler id="Movies" onRender={callback}>
      <Movies {...props} />
    </Profiler>
  </App>
);

Interaction Tracing API

import { unstable_Profiler as Profiler } from "react";
import { render } from "react-dom";
import { unstable_trace as trace } from "scheduler/tracing";

class MyComponent extends Component {
  addMovieButtonClick = event => {
    trace("Add To Movies Queue click", performance.now(), () => {
      this.setState({ itemAddedToQueue: true });
    });
  };
}

import { unstable_trace as trace } from "scheduler/tracing";

trace("initial render", performance.now(), () => {
   ReactDom.render(<App />, document.getElementById("app"));
});

Puppenspieler

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  const navigationPromise = page.waitForNavigation();
  await page.goto('https://react-movies-queue.glitch.me/')
  await page.setViewport({ width: 1276, height: 689 });
  await navigationPromise;

  const addMovieToQueueBtn = 'li:nth-child(3) > .card > .card__info > div > .button';
  await page.waitForSelector(addMovieToQueueBtn);

  //  ...
  await page.tracing.start({ path: 'profile.json' });
  //   
  await page.click(addMovieToQueueBtn);
  //  
  await page.tracing.stop();

  await browser.close();
})()

User Timing API

//     
performance.mark('Movies:updateStart');
//  

//     
performance.mark('Movies:updateEnd');

//        
performance.measure('moviesRender', 'Movies:updateStart', 'Movies:updateEnd');

• Next.js-hydration: Zeit, die erforderlich ist, um vorgerenderte Markups in den Betriebszustand zu bringen.
• Next.js-nav-to-render: Die Zeit vom Beginn der Navigation bis zum Beginn des Renderns.

Entwicklertools und Leuchtturm