SPA LCP和完全加载指标说明

背景

现代Web开放框架大多数使用MVVM框架，例如Angular、Vue、React、Flutter等，该类型框架通常在DOM加载完成DomContentLoaded事件触发之后，执行框架的初始化、路由的加载，API接口的调用在数据加载完毕之后再进行。

LCP的监控

LCP PerformanceObserver为最大元素渲染监听器，该监听器在UI发生变动后会不断触发，所以我们只要找到一个合适的停止点则就能够找到用户直观感受的页面完成时间，例如在完全加载事件触发之前的最后一次LCP时间，则和用户的直观感受更为接近。

完全加载监控

在loadEventEnd完成后会关注一段时间内（默认500ms）发起的Ajax请求、静态资源请求并直到这些请求响应完成的时间，可以将其认为是页面完全加载完毕的耗时。