I should also point out that I did not try to use nested components, but only for a single one with all the tags Components. This will be clearly seen from my code.
Some points must be made before the approach. We know that in the reaction life cycle, the constructor is the first to trigger , The constructor is triggered immediately after rendering the component. This makes me think that the time between the trigger of the constructor and the trigger of componentDidMount is the time it takes for the rendering to complete.
Another important point is how setTimeout works. We know The amount of time passed to the setTimeout function is not the actual amount before the function is triggered, 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.
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 />
}
The idea here is that because the constructor is triggered first, I can call my timer function from 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 triggered after the rendering is complete, so I did not pass any delay to make sure it is actually rendering Triggered immediately after completion. Then the callback function records the current time again, and now I can see the difference between the start and end time of rendering.
Hope this helps.
< /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.