如何使用HTML5中FirstInputDelay衡量用户在加载期间点击按钮的响应度-H5教程-PHP中文网

fid是浏览器自动采集的首次输入延迟指标，衡量用户首次交互到响应的时间，需用performanceobserver获取，不能通过html设置；2024年3月起已被inp取代。

如何使用html5中firstinputdelay衡量用户在加载期间点击按钮的响应度

First Input Delay（FID）不是通过HTML5直接“使用”或“设置”的指标，而是浏览器在用户首次与页面交互（如点击按钮）时自动采集的真实用户体验度量值，需借助JavaScript API（PerformanceObserver）获取，不能靠HTML代码实现。

什么是FID及其适用场景

FID衡量的是从用户首次点击、触摸或按键等输入行为开始，到浏览器实际能够响应该输入之间的时间延迟（单位：毫秒）。它反映的是页面主线程是否被阻塞（例如长任务、未优化的JS执行），直接影响用户对“卡顿”的感知。

注意：FID只在真实用户操作中触发，且仅计算首次输入。它不适用于自动化测试（如Puppeteer），也不在无交互的页面中产生数据。

如何在页面中捕获FID值

使用浏览器原生的 PerformanceObserver 监听 first-input 类型条目：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

确保脚本尽早加载（建议放在中，使用 defer）
监听 first-input 条目，提取 processingStart - startTime 即为FID值
推荐上报逻辑：仅在FID > 0时记录，并避免重复触发（FID天然只有一次）

示例代码：

<script>
if ('PerformanceObserver' in window) {
  new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      // FID = 处理开始时间 - 输入发生时间
      const fid = entry.processingStart - entry.startTime;
      if (fid > 0) {
        console.log('FID:', fid, 'ms');
        // 此处可发送至分析平台，如：navigator.sendBeacon('/log', JSON.stringify({fid}));
      }
    }
  }).observe({ type: 'first-input', buffered: true });
}
</script>