INP理解和优化

3 阅读1分钟

INP理解

作用:INP衡量的是用户交互(点击/触摸/键盘输入)的响应速度。

核心:优化的核心是确保浏览器的主线程能快速处理事件回调。

长任务:任何连续占用主线程超过50ms的执行过程。这是导致狡猾卡顿的元凶。

测量原理:INP会记录页面生命周期内所有用户交互的最慢响应延迟,并取其中的最差值(通常在第998分位)。

INP优化

拆分长任务

将长任务分解为更小的异步任务。

优化事件回调

避免在事件回调中执行耗时操作(比如直接进行大量dom操作或复杂计算)

避免布局抖动

频繁的强制浏览器重新计算样式和布局会严重阻塞主线程。