SPA LCP和完全加载指标说明

背景

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

LCP的监控

LCP PerformanceObserver为最大元素渲染监听器，该监听器在UI发生变动后会不断触发，所以我们只要找到一个合适的停止点则就能够找到用户直观感受的页面完成时间，例如在页面加载完毕客户的UI 或子路由跳转展示完毕之后获取最新的LCP值，则和用户的直观感受更为接近。

总耗时监控

• 页面总耗时，不以navigationTiming的loadEventEnd 为结束点。
• 标记loadEventEnd事件触发之前的XHR请求并记录，可配置请求黑名单和请求白名单进行过滤。
• 监控DOM变更事件，每次触发DOM变更事件时，判断触发时间的前resource_associate_threshold配置时间(默认为100ms)内是否存在已发起未结束或已结束的XHR请求，若有则查找DOM变更内的IMG/SCRIPT/IFRAME事件并追加onload监听，在页面加载完毕时