clearresourcetimings() 是 performance 接口方法，用于清空浏览器性能缓冲区中已记录的 resource 类型条目（即 performanceresourcetiming 对象），但不影响导航、标记或测量条目；它仅清除已存入缓冲区的资源计时，不阻止后续新资源记录，且在现代浏览器中兼容良好。
clearResourceTimings 是什么，它真能清掉资源计时吗？
clearResourceTimings() 是 Performance 接口提供的一个方法，作用是清空当前页面已记录的资源性能条目（即 PerformanceResourceTiming 对象）。但它不清理导航计时（PerformanceNavigationTiming）或用户计时（PerformanceMark/PerformanceMeasure），只针对通过 performance.getEntriesByType('resource') 获取的那些资源项。
注意：调用后，后续新加载的资源仍会正常记录 —— 它只是清缓冲区，不是关监控。
为什么调用 clearResourceTimings 后 getEntriesByType('resource') 还有数据？
常见错误现象：performance.clearResourceTimings(); console.log(performance.getEntriesByType('resource')); 仍返回非空数组。
原因有二：
- 调用时机太早：资源还没完成加载，
getEntriesByType('resource')返回的是“已进入缓冲区但尚未被清除前”的快照，而clearResourceTimings()只影响后续新增项； - 浏览器实现差异：Chrome 和 Edge 在页面生命周期早期（如
DOMContentLoaded前）可能延迟写入部分资源条目，导致清除不彻底。
建议做法：
- 在
window.addEventListener('load', ...)后调用，确保主资源（HTML、CSS、JS、图片等）基本就绪； - 若需多次采样，应在每次采样前先清、再等资源加载、再取；不要依赖“清一次管全程”。
实际使用时要注意的兼容性与副作用
clearResourceTimings() 在现代浏览器中支持良好（Chrome 25+、Firefox 37+、Safari 11+、Edge 12+），但以下情况需特别留意：
- 在 iframe 中调用时，只影响该 iframe 的
performance实例，不影响父页； - 某些浏览器（如旧版 Safari）在页面卸载阶段（
beforeunload）调用可能被忽略； - 如果你正在用
PerformanceObserver监听'resource'类型，clearResourceTimings()不会触发 observer 回调，也不会中断已注册的观察器； - 频繁调用无性能代价，但无意义地反复清空会影响你做跨阶段资源对比（比如首屏 vs 滚动加载）。
示例（安全调用方式）：
window.addEventListener('load', () => {
performance.clearResourceTimings();
// 此后动态插入的 script/img 等才会被计入新缓冲区
const img = new Image();
img.src = '/dynamic-image.png';
});
替代方案：什么时候不该用 clearResourceTimings？
如果你的目标是「只分析某次异步请求的资源耗时」，直接清缓冲区并不够 —— 因为已有资源条目可能干扰过滤。更稳妥的做法是：
- 使用
performance.mark()+performance.measure()手动圈定范围； - 或在发起请求前记下当前
performance.getEntriesByType('resource').length，之后用 slice 截取新增部分； - 若在测试环境（如 Puppeteer），可配合
page.metrics()或重置整个Performance上下文（重启页面更可靠）。
clearResourceTimings() 的真实价值在于「控制缓冲区大小」和「避免历史噪声」，而不是精准隔离单次请求。缓冲区默认上限是 150 条，超了会自动 FIFO 踢出旧项 —— 所以它常被忽略，直到你发现 getEntriesByType('resource') 返回几百条、且包含几小时前的资源记录时，才意识到该清了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
