使用Chrome DevTools时间轴来衡量：函数调用，重新计算样式，布局和绘制时间

Question

我正在构建实时布局。

如果服务器每200ms发送一次包，则函数调用+重新计算样式+布局+绘制时间必须小于200ms。

将performance.mark与performance.measure或console.time('1')与console.timeEnd('1')一起使用我可以衡量Function Call什么是不够的。

有没有任何已知的方法如何设置某种锚来获取和记录包含Paint的数字？

这将用于自动化性能测试。

提前致谢！

Answer 1

使用Console API记录绘画时间是不可能的。看起来似乎试图将其整合到WebKit several years ago中，但这从未实现过。目前，您只能使用console.profile进行CPU分析，但这与您无关。

您需要显式运行时间轴工具来收集Paint分析数据。你可以考虑使用宏来运行它。您可以将数据导出到JSON文件中，以便可以重新导入和比较每个数据。它不适合自动化测试，但我不确定其他方式。

Answer 2

这不包括绘画时间本身，但是在绘画之前会调用requestAnimationFrame。

我也尝试了setTimeout(fn, 0)，但结果是在画完后很长时间才被调用。

如果您只想知道帧的末尾还剩下一些时间，那么您可以使用requestIdleCallback。