在React单页面应用程序中，测量页面在视觉上完成所需时间的有用方法是什么？

Question

或者，如果很难进行精确的测量，是否有一种测量方法可以对前端的改进做出一定比例的响应？我们希望在这种情况发生时触发一个事件(用于真正的用户监控)。

Answer 1

这里有一个想法可能会给你你需要的东西。我试过了，它确实有效，但我不确定这是否足够准确，以满足您的需求。我还应该指出的是，我没有尝试使用嵌套组件，而是仅针对具有其所有标记的单个组件。从我的代码中可以清楚地看到这一点。

在进行方法之前，必须先介绍一些要点。我们知道，在react生命周期中，constructor是第一个触发的，componentDidMount在组件呈现之后立即触发。这让我认为，从构造函数触发到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中的回调只会在渲染完成后触发，因此我没有延迟地传递它，以确保它实际上在渲染完成后立即触发。然后回调函数再次记录当前时间，现在我可以看到渲染的开始时间和结束时间之间的差异。

希望这能有所帮助。