FID指标很高，是不是因为CSS阻塞了交互？

令狐倩影提问于 2026-03-26 09:15:25 阅读 23

前端

最近用Lighthouse测性能，发现FID（首次输入延迟）经常超过300ms。页面其实没多少JS，但有个全屏加载动画是用CSS写的，会不会是这个导致主线程被占用了？我试过把动画移到DOMContentLoaded之后再加class，但FID还是很高。

这是那个动画的CSS：

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
  animation: fadeOut 1.2s forwards;
}

@keyframes fadeOut {
  to { opacity: 0; visibility: hidden; }
}

这种纯CSS动画真的会影响FID吗？还是我忽略了其他问题？

我来解答赞 7 收藏

反馈

1 条解答

沐言 Lv1

纯CSS动画理论上不会阻塞主线程，因为它们使用了GPU加速。不过你这个情况有点不一样，问题可能出在那个超高的 z-index 和动画持续时间上。

首先建议把 z-index: 9999; 降到合理的值，比如 10 或 20 就够了。这么高的层级会强制浏览器重排，影响性能。

另外，fadeOut 动画持续1.2秒太长了，建议缩短到300ms以内。可以试试这样：

.loader {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #fff;

  z-index: 10;

  animation: fadeOut 0.3s forwards;

}



@keyframes fadeOut {

  to { opacity: 0; visibility: hidden; }

}

更好的写法是用 prefers-reduced-motion 媒体查询来照顾那些对动画敏感的用户：

@media (prefers-reduced-motion) {

  .loader {

    animation: none;

  }

}

别忘了检查一下有没有其他地方阻塞了渲染，比如字体加载、图片解码之类的。FID高的话，八成还是有JS在偷偷捣鬼。用performance工具看看主线程的火焰图，找找看是不是某个脚本在拖后腿。

2026-03-26 09:21