رد ملف تعريف أداء التطبيق

تفاعل API المحلل

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: الوقت الذي ارتكبت فيه شركة React هذا التحديث.
• 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: الوقت من بداية التنقل إلى بداية العرض.

أدوات المطور والمنارة