INP理解
作用:INP衡量的是用户交互(点击/触摸/键盘输入)的响应速度。
核心:优化的核心是确保浏览器的主线程能快速处理事件回调。
长任务:任何连续占用主线程超过50ms的执行过程。这是导致狡猾卡顿的元凶。
测量原理:INP会记录页面生命周期内所有用户交互的最慢响应延迟,并取其中的最差值(通常在第998分位)。
INP优化
拆分长任务
将长任务分解为更小的异步任务。
优化事件回调
避免在事件回调中执行耗时操作(比如直接进行大量dom操作或复杂计算)
避免布局抖动
频繁的强制浏览器重新计算样式和布局会严重阻塞主线程。