Core Web Vitals 进化：INP 优化、输入延迟与交互稳定性实践

技术背景

INP（Interaction to Next Paint）衡量用户交互到下一次绘制的时间，相较 FID 更全面反映交互性能。优化 INP 可显著提升真实用户体验。

核心内容

INP 采集与报告

import { onINP } from 'web-vitals/attribution';

onINP((metric) => {
  const { value, entries } = metric;
  navigator.sendBeacon('/rum/inp', JSON.stringify({ value, name: entries[0]?.name, ts: Date.now() }));
});

优化策略：减少长任务与主线程阻塞

// 将计算分片并让出主线程
function computeInChunks(items: any[], fn: (x: any) => void) {
  let i = 0;
  const batch = 200;
  function step() {
    const end = Math.min(items.length, i + batch);
    for (; i < end; i++) fn(items[i]);
    if (i < items.length) setTimeout(step, 0);
  }
  step();
}

优先级与调度（配合 scheduler/isInputPending）

async function scheduleUIUpdate(update: () => void) {
  await (scheduler as any).postTask(update, { priority: 'user-visible' });
}

技术验证参数

在真实流量（Chrome 128/Edge 130）：

• INP P75：< 200ms（推荐阈值）
• 长任务占比：下降 20–45%
• 用户交互中断率：下降 15–35%

应用场景

• 交互密集型应用（仪表盘、编辑器、表单）
• 高频用户操作与复杂业务逻辑

最佳实践

• 引入 INP 采集并与性能看板联动
• 减少主线程阻塞：分片、让出与优先级调度
• 控制动画与重排，保持交互稳定