使用 Chrome DevTools 时间线测量：函数调用、重新计算样式、布局和绘制时间答案

【问题标题】：Using Chrome DevTools timeline to measure: Function Call, Recalculate Style, Layout and Paint time使用 Chrome DevTools 时间线测量：函数调用、重新计算样式、布局和绘制时间
【发布时间】：2016-12-06 07:33:27
【问题描述】：

我正在构建实时布局。

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

通过使用performance.mark 和performance.measure 或仅使用console.time('1') 和console.timeEnd('1')，我可以测量Function Call 还不够。

是否有任何已知的方法如何放置某种锚来获取和记录包括 Paint 在内的数字？

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

提前致谢！

【问题讨论】：

标签： javascript performance google-chrome google-chrome-devtools

【解决方案1】：

无法使用Console API 记录绘制时间。似乎有人尝试将其集成到 WebKit several years ago 中，但这从未实现。目前，您只能使用 console.profile 进行 CPU 分析，但这与您无关。

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

【讨论】：

【解决方案2】：

这不包括绘制时间本身，但requestAnimationFrame 将在绘制之前被调用。

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

如果您只想知道在帧结束时还有一些时间，您可以使用requestIdleCallback。

【讨论】：