元素
元素
工具
博客
问答

FID 高是因为按钮点击没响应吗？

UI恩宇 阅读 27
移动

我在用 Lighthouse 测移动端性能时，FID（首次输入延迟）老是超 300ms，页面上就一个提交按钮，点下去明显卡一下才触发。我试过把事件监听写成 passive 的，也用了防抖，但没啥用。

是不是因为我的 HTML 结构有问题？按钮是在一个动态加载的表单里，代码大概长这样：

<form id="feedback-form">
  <input type="text" name="msg" />
  <button type="submit" id="submit-btn">提交</button>
</form>

<script>
  document.getElementById('submit-btn').addEventListener('click', (e) => {
    e.preventDefault();
    // 模拟一些处理逻辑
    setTimeout(() => console.log('sent'), 50);
  });
</script>

这种写法会导致主线程阻塞吗？还是说问题出在别处？

移动性能
我来解答 赞 1 收藏
二维码
手机扫码查看
反馈
1 条解答
文科 ☘︎
文科 ☘︎ Lv1
FID 高的问题确实棘手。你的代码看起来没问题，但既然你在用 Lighthouse 并且 FID 还是高，可能得再深挖一下。首先，setTimeout 虽然会把任务推到宏任务队列，但如果主线程上有其他耗时的操作，FID 仍然可能会高。

建议改成用 requestAnimationFrame 来代替 setTimeout，这样可以确保你的操作在下一帧开始前执行，减少主线程被阻塞的可能性。另外，检查一下是否有其他同步脚本或者样式计算在页面加载时阻塞了主线程。

修改后的代码如下：
document.getElementById('submit-btn').addEventListener('click', (e) => {

  e.preventDefault();

  // 使用 requestAnimationFrame 来减少主线程阻塞

  requestAnimationFrame(() => {

    console.log('sent');

  });

});


如果问题依然存在，建议排查一下是否有其他未优化的资源加载，比如大图片或者第三方脚本等。
点赞
2026-03-23 19:12
相关推荐
元素
元素
工具
博客
问答
登录/注册