प्रतिक्रिया अनुप्रयोग प्रदर्शन रूपरेखा

रिएक्टर प्रोफाइलर एपीआई

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

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

• id: idघटक पेड़ से संपत्ति Profilerजिसके लिए परिवर्तन प्रतिबद्ध था।
• phase: mount( या यदि पेड़ को माउंट किया गया था), या update(यदि पेड़ को फिर से प्रदान किया गया था)।
• actualDuration: निश्चित अपडेट रेंडर करने के लिए लिया गया समय।
• baseDuration: कैशिंग के बिना पूरे उपशीर्षक को प्रस्तुत करने का अनुमानित समय।
• startTime: समय प्रतिक्रिया ने इस अद्यतन को प्रस्तुत करना शुरू कर दिया।
• commitTime: जिस समय रिएक्ट ने यह अपडेट किया।
• interactions: इस अद्यतन के लिए कई "बातचीत"।

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

इंटरेक्शन ट्रेसिंग एपीआई

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

कठपुतली चलानेवाला

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

उपयोगकर्ता समय एपीआई

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

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

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

• Next.js-hydration: पूर्व-निर्धारित मार्कअप को कार्यशील स्थिति में लाने के लिए आवश्यक समय।
• Next.js-nav-to-render: नेविगेशन की शुरुआत से लेकर प्रतिपादन की शुरुआत तक का समय।

डेवलपर टूल और लाइटहाउस