解析Resource Timing中bufferFull事件避免性能数据丢失的方法

Resource Timing的bufferFull事件处理不当可能导致性能数据丢失，本文详解、扩容与上报全流程。

处理Resource Timing的bufferFull事件时，关键在于建立主动机制并定期清空缓冲区。由于浏览器默认仅保留150条资源记录，若不及时处理，在单页应用等高资源消耗场景中极易造成重要性能数据丢失。

resourcetimingbufferfull 事件

该事件在缓冲区容量告急时触发，建议页面加载初期就完成注册：

1. 通过window.performance.setResourceTimingBufferSize(n)调整缓冲区容量（推荐250左右），需注意内存占用问题
2. 优先采用addEventListener('resourcetimingbufferfull', handler)方式注册事件，其兼容性优于直接赋值方式
3. 在回调中先通过performance.getEntriesByType('resource')获取当前所有资源记录，再执行performance.clearResourceTimings()释放缓冲区空间

提取并上报资源性能数据

从PerformanceResourceTiming对象中可提取多项关键指标，需进行结构化处理：

1. 首先筛选出JS/CSS等直接影响用户体验的核心资源，排除favicon等非关键请求
2. 重点计算DNS查询时长、TCP连接耗时、TTFB及资源总加载时间等核心指标
3. 推荐使用navigator.sendBeacon进行数据上报，确保页面关闭前能完成传输

补充兜底策略防漏采

为确保数据采集完整性，还需实施以下补充措施：

1. 在window.onload时主动采集一次资源数据，作为基础备份
2. 对动态加载资源设置100ms延时采集，保证数据已写入缓冲区
3. 坚控performance.timing中的关键时间节点，识别页面跳转等特殊情况

通过系统化与多重保障机制，可有效避免Resource Timing数据丢失问题。