核心指标更迭：从FID到INP的逻辑转变

重点关注 “交互到下一绘”✅ 这📢段区间内是否有超过200毫秒的空白或脚本执行阶段

实战优化：从缩短FID到全链路降低INP

优化事件处理🤔函数 ：避免在事件监听器中执行复杂的DOM操作或同步的HTTP请求

张丰韵

常见的瓶颈包括： 动画帧率不稳（掉帧） 大量同步样式计算（Recalc Style） 强制回流（Forced Reflow）🎯——如在循环中频繁读写offsetHeight等属性 通过逐步缩小问题范围，通常能在两周内将INP从“需要改进”（约200-500毫秒）优化至“良好”（小于200毫秒）水平

从数据到体验：INP带来的深层价值

表格对比可以帮助团队明确分工： 优化层面 FID优化手段 INP新增优化点 脚本执行 延迟加载、缩减JS体积 分解长任务、使用Web Worker 样式计算 减少重排触发 避免强制回流、使用contain属性 绘制合成 较少涉及 避免层爆炸、降😎低重绘区域 从数据到体验：INP带来的深层价值 从FID到INP的过渡，本质上是从“用户点击后有没有回应”升级为“用户点击后整个交互流程是否流畅”

过渡期的兼容建议

这意味着它不仅包含FID🤔关注的⭐初始响应，还涵盖了事件处理、DOM更新、重排重绘等后续步骤

更多精选文章

建议使用 代码拆分 和 懒加载 技术，将非关键脚☀️本推迟到空闲时间执行，避免交互时刻主线程被大量计算阻塞