INP Interaction to Next Paint
一句话定义
用户与页面交互(点击、触摸、输入)后,浏览器绘制下一帧所需的时间。
打个比方 Analogy
你按遥控器换台,电视反应的时间。按了 1 秒才换,你会以为遥控器坏了。
岗位实战怎么做 In Practice
目标 < 200 毫秒。优化方法:减少 JavaScript 执行时间、拆分长任务(Long Tasks)、使用 Web Workers、延迟加载非关键 JS。
案例与避坑 Pitfalls
第三方脚本(如聊天插件、广告代码、热力图工具)是 INP 的主要杀手。使用 Google Tag Manager 的 "trigger" 功能延迟加载非必要脚本。