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

或者，如果精确测量很困难，是否有一种测量方法能够对前端改进做出一定程度的响应？我们希望在发生这种情况时触发一个事件（用于真正的用户监控）。

这里有一个想法，可以满足您的需要。我试过了，它确实有效，但我不确定这是否足够准确以满足您的需要。 我还应该指出，我并没有对嵌套组件进行这种尝试，而是只考虑单个组件及其所有标记。这将从我的代码中明确

在进近之前，必须在某些点前加上前缀。我们知道，在react生命周期中，

构造函数

是第一个触发的，而

组件didmount

在呈现组件后立即触发。这使我认为，从构造函数启动到componentDidMount启动所需的时间就是渲染完成所需的时间

另一个要点是

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>
    )
  }

}

导出默认类App扩展React.Component{
构造函数（）{
超级（）；
这个.timer（）；
}
计时器（）{
让日期=新日期（）；
console.log（date.toLocaleTimeString（））
设置超时（（）=>{
myTimer（）；
}, 0)
函数myTimer（）{
让日期=新日期（）；
console.log（date.toLocaleTimeString（））
}
}
createItems（）{
设项目=[]；
for（设i=0；i<100000；i++）{
items.push（{i}）
}
退货项目；
}
render（）{
const items=this.createItems（）；
返回(
{items}
)
}
}

这里的想法是，由于构造函数首先启动，我可以从那里调用计时器函数并获取开始时间。然后在我的计时器函数中调用setTimeout并将其作为延迟参数传递给0。因为JavaScript是单线程的，setTimeout中的回调只会在渲染完成后触发，因此我不延迟它，以确保它在渲染完成后立即触发。然后回调函数再次记录当前时间，现在我可以看到渲染的开始时间和结束时间之间的差异

---

希望这能有所帮助。

我简直不敢相信我从未见过这个工具！它看起来非常有用，但为此，我们正试图在生产现场收集测量数据。谢谢如果您正在寻找一个APM，它有一些非常酷的工具，用于这些类型的最终用户指标。