SPA LCP和完全加载指标说明

背景

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

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

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

1.SPA监控方式开关，默认打开：spa_metric_enable。

示例：

{
    ...,
"spa_metric_enable": true
    ...
}

2.浏览器load事件触发时计算延迟时间：pfDelay。

延迟时间取没有mark指标中的最大值，如果都mark了，则延迟时间为0；没有pfDelay，则延迟时间为0。

关于mark指标自定义打点请查看指标自定义打点。

示例：

pfDelay: {
 le: 1000,
 dr: 2000,
 fs: 1000,
 fp: 1000
}

3.页面加载完成默认等待时间，默认500ms：page_load_delay。

示例：

{
    ...,
"page_load_delay": 1000
    ...
}

4.过滤页面加载事件加入的请求和资源过滤配置白名单：event_resources。

示例：

{
    ...,
"event_resources":["name01","name02"]
    ...
}

5.过滤页面加载事件加入的请求和资源过滤配置黑名单：event_resources_ignore。

示例：

{
    ...,
"event_resources_ignore":["name01","name02"]
    ...
}

6.元素加载最长等待时间，默认10S：resource_wait_time。

示例：

{
    ...,
"resource_wait_time": 10000
    ...
}

7.元素和Ajax请求阈值，默认为100ms：resource_associate_threshold。

示例：

{
    ...,
"resource_associate_threshold": 500
    ...
}