React Profiling Application Profiling

API do React Profiler

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

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

• id: Propriedade idda árvore de componentes Profilerpara a qual a alteração foi confirmada.
• phase: ou mount(se a árvore foi montada) ou update(se a árvore foi renderizada novamente).
• actualDuration: O tempo necessário para renderizar uma atualização fixa.
• baseDuration: Tempo estimado para renderizar a subárvore inteira sem armazenar em cache.
• startTime: O momento em que o React começou a renderizar esta atualização.
• commitTime: o momento em que o React confirmou esta atualização.
• interactions: Muitas "interações" para esta atualização.

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 rastreamento de interação

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

Marionetista

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 tempo do usuário

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

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

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

• Next.js-hydration: tempo necessário para levar a marcação pré-renderizada à condição de trabalho.
• Next.js-nav-to-render: A hora desde o início da navegação até o início da renderização.

Ferramentas do desenvolvedor e farol