Performance – In the React Single Page Appset, what method can be measured to measure the full display of the page?

export default class App extends React.Component {
 constructor() {
 super();
 this.timer ();
 }

 timer() {
 let date = new Date();
 console.log(date.toLocaleTimeString())
 setTimeout(() => {
 myTimer();
 }, 0)

 function myTimer() {
 let date = new Date();
 console.log(date.toLocaleTimeString())
 }
 }

 createItems() {
 let items = [];
 for ( let i = 0; i <100000; i++) {
 items .push(
{i}
)
 }
 return items;
 }

 render() {
 const items = this.createItems();
 return (
 

 {items}
 

 )
 }< br />
}

< /p>

Or, if it is difficult to make precise measurements, is there a measurement that is proportional to the front-end improvement? We want to initiate an event when this happens (for real user monitoring).

This is an idea that can provide you with what you need. I tried it and it really worked But I’m not sure if this is enough for your needs.
I should also point out that I did not try to use nested components, but only for a single component with all the tags. This will be seen clearly from my code

Before the approach, we must first make some points. We know that in the reaction life cycle, the constructor is the first to trigger, and the constructor is triggered immediately after rendering the component. This makes I think the time between the triggering of the constructor and the triggering of componentDidMount is the time required for the rendering to complete.

Another important point is how setTimeout works. We know that the amount of time passed to the setTimeout function is not before the function is triggered The actual amount, but the minimum amount before the function is triggered. This is because of the event loop and is beyond the scope here.

Considering the above situation, this is my code.

< /p>

export default class App extends React.Component {
 constructor() {
 super();
 this.timer();
 }
 
 timer() {
 let date = new Date();
 console.log(date.toLocaleTimeString())
 setTimeout(() => {
 myTimer ();
 }, 0)

 function myTimer() {
 let date = new Date();
 console.log(date.toLocaleTimeString()) 
 }
 }

 createItems() {
 let items = [];
 for (let i = 0; i <100000; i++) { 
 items.push(
{i}
)
 }
 return it ems;
 }

 render() {
 const items = this.createItems();
 return (
 

 { items}
 

 )
 }

}

The idea here is that because the constructor is triggered first, I can start from Call my timer function there and get the start time. Then in my timer function, I call a setTimeout and pass it as a delay parameter to 0. Because JavaScript is single-threaded, the callback in setTimeout will only be in It is only triggered after the rendering is complete, so I didn’t pass any delay to make sure it actually fires immediately after the rendering is complete. Then the callback function records the current time again, and now I can see the difference between the start and end time of the rendering.

Hope this helps.