性能 – 在React单页面应用程序中,有什么方法可以衡量页面在视觉上完整显示的

或者,如果难以进行精确测量,是否存在一种与前端改进成比例的测量？我们想在发生这种情况时发起事件(对于真实用户监控). 这是一个可以为您提供所需内容的想法.我尝试了它确实有效,但我不确定这是否足以满足您的需求.
我还应该指出,我没有尝试使用嵌套组件,而是仅针对具有所有标记的单个组件.这将从我的代码中清楚地看出.

在进近之前必须先提出一些要点.我们知道在反应生命周期中,构造函数是第一个触发的,构造函数在渲染组件后立即触发.这使我认为构造函数触发和触发componentDidMount之间的时间是渲染完成所需的时间.

另一个重点是setTimeout的工作方式.我们知道传递给setTimeout函数的时间量不是函数触发前的实际量,而是函数触发前的最小量.这是因为event loop并且超出了这里的范围.

考虑到上述情况,这是我的代码.

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并将其作为延迟参数传递给0.因为JavaScript是单线程的,所以setTimeout中的回调只会在渲染完成后才会触发,因此我没有传递任何延迟,以确保它实际上在渲染完成后立即触发.然后回调函数再次记录当前时间,现在我可以看到渲染的开始和结束时间之间的差异.

希望这可以帮助.