Web Vitals INP 输入延迟优化 与交互响应治理实践 PerformanceObserver

概览INP 衡量用户输入到页面响应的整体延迟。通过 `PerformanceObserver` 采集 `event` 条目可定位交互瓶颈，并以任务切分、渲染稳定与资源调度方式降低延迟。采集与上报'use client'

let maxEvent = 0

const po = new PerformanceObserver((list) => {

for (const e of list.getEntries() as PerformanceEventTiming[]) {

if (e.name === 'click' || e.name === 'pointerdown' || e.name === 'keydown') {

maxEvent = Math.max(maxEvent, e.duration)

}

}

})

po.observe({ type: 'event', buffered: true, durationThreshold: 16 })

addEventListener('beforeunload', () => {

navigator.sendBeacon('/api/vitals', JSON.stringify({ inp: maxEvent }))

})

任务切分与让渡function handleClick() {

// 轻任务立即响应

updateUI()

// 重任务让渡主线程

setTimeout(() => heavyCompute(), 0)

}

function heavyCompute() {

// 将长任务拆分为片段

const chunk = 1000

for (let i = 0; i < 50000; i += chunk) {

// 片段处理...

}

}

样式与布局稳定/* 关键图片与组件设置尺寸，避免过度重排 */

img { width: 100%; height: auto; }

/* 使用 clamp/sizes 减少字体与图片引起的抖动 */

治理要点避免同步阻塞（JSON 解析、复杂排序）占用输入响应路径。对网络请求使用缓存与退避策略，减少交互等待。结合 Worker 将重计算移出主线程。验证与指标浏览器：Chrome 120+、Edge 120+、Safari/Firefox 支持逐步完善（退化为体验优化指导）INP：降至 200ms 以下；交互响应可靠、无明显卡顿