如何模拟较差的First Input Delay(FID)得分？现有方案无效求指导

为什么你的方法无效？ #

• 按钮点击事件里加延迟：FID测量的是「用户发起交互」到「浏览器开始执行交互回调」的时间差，回调内部的延迟属于事件处理阶段，不会影响FID的计算。只要浏览器能立刻响应交互并启动回调，FID就会很低。
• Cloudflare Worker延迟服务器响应：这只会增加页面加载阶段的TTFB（首字节时间），但FID是页面加载完成后、用户与页面交互时的指标，和服务器端延迟完全无关。

正确生成高FID的方法 #

要触发高FID，核心是在用户发起交互的瞬间，让浏览器主线程被长时间阻塞，使得浏览器无法及时处理用户的交互请求。

示例代码：

<!DOCTYPE html>
<html>
<body>
  <button id="testBtn">点击测试</button>
  <script>
    // 页面加载后立刻用同步任务阻塞主线程5秒
    function blockMainThread() {
      const start = Date.now();
      while (Date.now() - start < 5000) {
        // 空循环，持续占用主线程
      }
    }
    blockMainThread();

    // 给按钮绑定点击事件（即使回调为空，只要点击发生在阻塞期间，FID就会很高）
    document.getElementById('testBtn').addEventListener('click', () => {
      console.log('点击事件触发');
    });
  </script>
</body>
</html>

操作步骤：

1. 打开这个页面，页面会卡住5秒（因为主线程被阻塞）
2. 在页面卡住的这5秒内点击按钮
3. 此时浏览器要等主线程结束阻塞后才能处理点击事件，FID就会接近5000ms

关键原理 #

FID的本质是反映主线程的繁忙程度：当用户交互发生时，如果主线程正在执行长任务（比如同步循环、大型DOM操作、复杂计算），浏览器必须等待长任务结束才能处理交互，这段等待时间就是FID。

内容的提问来源于stack exchange，提问作者TinyTiger