前端性能监控如何获取一个页面DOM渲染完毕的实际时间？

Question

window.performance.timing可以获取页面上的一些性能数据，比如白屏时间、页面DOM树解析、资源文件解析时间。但在实际应用中，我们希望知道一个页面渲染完毕的时间，而非DOM树解析时间。比如一个列表页组件，通过ajax获取列表数据。ajax请求只与表格数据显示有关，不影响列表页的布局，ajax请求返回才能算页面渲染结束，如何计算这个时间？
类似这样的流程，如果不在具体模块中改代码，而是在统一入口处做监听，如何实现呢？

目前使用的是skywalking-client-js做的监控，可以改源码，但还没有可靠方案。前端框架用的是vue。

Answer 1

这应该是一个时间表，而不是将接口算在页面渲染结束里

比如最终的页面
第0ms 耗时0ms 2021-10-22 14:05:11 xxxx页面
第10ms 耗时10ms 2021-10-22 14:05:11 DNS查询耗时
第15ms 耗时5ms 2021-10-22 14:05:11 TCP链接耗时
第20ms 耗时5ms 2021-10-22 14:05:11 解析dom树耗时
第80ms 耗时60ms 2021-10-22 14:05:11 白屏时间
第200ms 耗时140ms 2021-10-22 14:05:11 domready
第220ms 耗时20ms 2021-10-22 14:05:11 onload
第290ms 耗时1200ms 2021-10-22 14:05:11 请求了 xxxa 接口
第290ms 耗时800ms 2021-10-22 14:05:11 请求了 xxxb 接口

Answer 2

Web 性能之数据、监控、指标
可以看看我的文章，希望对你有帮助