HTML怎么做FID监控_HTML First Input Delay首次输入监控【基础】-html教程-PHP中文网

fid是用户首次交互到浏览器开始处理事件的时间差，反映主线程阻塞情况；performance.getentriesbyname('first-input')的duration是处理耗时而非fid，需手动监听事件并用event.timestamp与performance.now()计算延迟。

html怎么做fid监控_html first input delay首次输入监控【基础】

什么是`FID`，为什么不能靠`performance.getEntriesByName('first-input')`直接用

FID（First Input Delay）是衡量页面对用户首次交互响应及时性的核心指标，定义为：从用户首次触发可交互事件（如click、keydown、tap等）到浏览器实际开始处理该事件回调之间的时间差。它反映的是主线程是否被阻塞。

很多人看到performance.getEntriesByName('first-input')就以为能直接取到FID值——但这是错的。这个API返回的是FirstInputEntry对象，其duration字段**不是FID**，而是事件处理耗时（即“响应时间”，不包含等待调度的延迟）。真正的FID = processingStart - startTime，而原生Entry里没有暴露processingStart。

所以必须手动监听事件 + 计算延迟，不能依赖getEntriesByName自动上报的duration。

怎么手动捕获`FID`：监听`click`/`keydown`并检查`event.timeStamp`与`performance.now()`差值

关键思路：在页面加载后尽早绑定事件监听器，对首个满足条件的输入事件，用event.timeStamp（事件触发时间戳）和performance.now()（当前执行时刻）估算主线程排队延迟。

event.timeStamp精度高，且是相对于navigationStart的毫秒数，可信赖
必须在事件回调内立即调用performance.now()，否则后续JS执行可能拉长误差
只监听click、keydown、mousedown、touchstart这四类标准FID事件类型（参考Web Vitals规范）
需过滤掉document.hidden === true时触发的事件（用户没在看页面）
一旦捕获首个有效事件，应立刻移除所有监听器，避免重复上报

示例代码：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

let fidReported = false;
const reportFID = (event) => {
  if (fidReported || document.hidden) return;
  const eventTime = event.timeStamp;
  const now = performance.now();
  const delay = now - eventTime;
  if (delay > 0) {
    // 上报 delay，即 FID 值
    console.log('FID:', delay);
    fidReported = true;
  }
};
<p>['click', 'keydown', 'mousedown', 'touchstart'].forEach(type => {
document.addEventListener(type, reportFID, { once: true, capture: true });
});
</p>

`FID`监控容易漏掉的三个边界情况

真实场景中，以下情况会导致FID未被捕获或数值失真，必须显式处理：

SPA路由切换后的新页面：单页应用中，pushState后用户首次点击不会触发全局document监听（因为监听器已在前一个“页面”注册完毕），需在每次路由就绪后重新安装监听
iframe内嵌内容：主页面监听不到子iframe里的用户输入；若需监控子frame，必须在iframe内部注入相同逻辑（且注意跨域限制）
合成事件或代理事件：React/Vue等框架的onClick是合成事件，绑定在document上，但它们的timeStamp可能被重写或滞后；更稳妥的做法是监听原生click并用event.target.closest('[data-interactive]')模拟业务意图