Reaccionar el perfil de rendimiento de la aplicación

React Profiler API

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

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

• id: Propiedad iddel árbol de componentes Profilerpara el que se confirmó el cambio.
• phase: o mount(si se montó el árbol) o update(si se volvió a representar el árbol).
• actualDuration: El tiempo necesario para procesar una actualización fija.
• baseDuration: Tiempo estimado para renderizar todo el subárbol sin almacenamiento en caché.
• startTime: La hora en que React comenzó a procesar esta actualización.
• commitTime: el momento en que React confirmó esta actualización.
• interactions: Muchas "interacciones" para esta actualización.

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

API de seguimiento de interacción

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"));
});

Titiritero

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();
})()

API de sincronización del usuario

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

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

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

• Next.js-hydration: tiempo requerido para llevar el marcado pre-renderizado a las condiciones de trabajo.
• Next.js-nav-to-render: El tiempo desde el inicio de la navegación hasta el inicio de la representación.

Herramientas para desarrolladores y faro