理解INP响应延迟与浏览器的工作原理

以下表格展示了不同任务类型对主线程的占用特点： 任务类型 典型占用时长 对INP的影响 JavaScript执行 50~500ms 直接阻塞交互响应 样式重计算 10~100ms 轻微延迟 布局与重排 20~200ms 可能产生明显卡顿 绘制与合成 5~30ms 影响较小 从表中可以看出，JavaScript执行时间往往是INP延迟的主要来源

打开该面板，录制一段页面操💯作，查🌅看哪些任务耗时最长

王家玮

拆分长任务 ：如果某个脚本需要大量计算，可以将其拆分为多个小任务，使用 setTimeout 分批执行