理解移动端 First Input Delay 的核心意义

大型 CSS 文件与未优化的 Web 字体： CSS 阻塞渲染的同时带来额外的样式计算开销，字体加载延迟也可能导致首次输入无反馈

同时，将大型 JS 库拆分为独立的功能模块，只打包首🚀屏必须用到的代码

注意事项

移动端 FID 延迟的主要成🍀因 造成移动端 FID 偏高的原因通常集中在以下几个方面： 主线程被长任务阻塞： JS 文件体积过大、同步执行的脚本过多，以及不必要的第三方插件（如广告追踪、社交分享按钮）在加载初期🌟争夺主线程资源

对于自定义字体，推荐使用 font-display: swap 或 font-display: optional ，避免字体加载过程阻塞用户输入

减少不必要的 HTML 嵌套，避免频繁使用 offsetTop 、 scrollHeight 等强制同步布局属性

移动端 FID 延迟的主要成因

压缩与分割长任务 长任务是指占用主线程超过 50 毫秒的 JS 执行过程

对于大数据量的列表🍀渲染，优先采用虚拟⚡滚动技术，避免一次性构建大量 DOM 节点

过多的嵌套选择器或🤔通配符会增加样式计算时间，间接拉长主线程阻塞窗口