Inside a React single page app, is a useful way to measure page display time visually complete?

Question

Or, if accurate measurement is difficult, is there a measurement that will respond somewhat in proportion to improvements on the front panel? We would like to trigger an event when this happens (for Real User Monitoring).

Answer 1

Here is an idea that can give you what you need. I tried and it works, but I'm not sure if it will be accurate enough for your needs. It should also be noted that I have not tried this with nested components, but rather with only one component with all its markup. This will be clear from my code.

. , constructor , componentDidMount . , , -DidMount, - , .

setTimeout. , , setTimeout, , , , , . - .

.

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(<h3 key={i}>{i}</h3>)
    }
    return items;
  }

  render() {
    const items = this.createItems();
    return (
      <div>
        {items}
      </div>
    )
  }

}

, , , . setTimeout . JavaScript , setTimeout , , , . , .

, .