如何准确统计iframe加载耗时？当前代码计时结果不准确

安全阿岳

2026-7-5

解决iframe加载时长统计不准确的问题

核心问题：计时起始点错误

你当前代码里的startTime = performance.now()是在设置s.src=url之后才执行的，这会导致计时晚于实际请求开始的时间——浏览器在你设置src的瞬间就可能发起请求了，这直接导致统计的时长比实际加载时间短，甚至完全不准。

修正后的基础代码

把计时起始点移到设置src之前，确保从请求发起前就开始计时：

var startTime = performance.now(); // 先记录起始时间
var s = document.createElement('iframe');
document.body.appendChild(s);
s.onload = function() {
  var totalTime = performance.now() - startTime;
  console.log(totalTime);
  timestamps.push(totalTime);
}
s.src = url; // 最后设置src，触发请求

其他影响准确性的因素及处理

缓存干扰：如果浏览器缓存了目标URL的资源，加载时长会远小于实际请求时间。可以给URL加随机参数避免缓存：
```
s.src = url + '?t=' + Date.now();
```
浏览器并行加载限制：如果批量创建多个iframe，浏览器会限制同时发起的请求数（一般是6个左右），后面的iframe会排队等待，导致计时包含了排队时间，而非纯加载时间。如果要统计单个URL的纯加载耗时，建议串行加载，即上一个iframe加载完成后再创建下一个。
跨域限制：如果iframe的URL和当前页面跨域，performance的部分数据会被浏览器屏蔽，若你控制目标端点，可设置Cross-Origin-Embedder-Policy和Cross-Origin-Opener-Policy响应头，允许跨域获取性能数据。