React 19 Profiler 并发渲染诊断与 INP 关联实践

概览Profiler 能采集渲染的开始/结束时间与开销，结合 INP 可定位输入到响应的瓶颈，从而采取任务切分与过渡更新策略提升体验。采集渲染开销'use client'

import React, { Profiler, useState, useTransition } from 'react'

function onRender(id: string, phase: 'mount' | 'update', actualDuration: number) {

navigator.sendBeacon('/api/render', JSON.stringify({ id, phase, actualDuration }))

}

export default function App() {

const [list, setList] = useState<string[]>([])

const [pending, startTransition] = useTransition()

function add(v: string) {

startTransition(() => setList((prev) => [...prev, v]))

}

return (

<Profiler id="List" onRender={onRender}>

<input onChange={(e) => add(e.target.value)} />

{pending && <p role="status">更新中…</p>}

<ul>{list.map((s) => (<li key={s}>{s}</li>))}</ul>

</Profiler>

)

}

INP 采集关联'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 }))

})

治理要点将昂贵更新标记为过渡，避免阻塞输入路径；对超大列表采用分页与虚拟化。切分长任务并让渡主线程；与缓存策略协作减少重复计算。使用 `role="status"` 提示挂起状态，兼顾可访问性。验证与指标React：19.0+；Next.js：15.0+渲染开销与 INP 关联清晰；输入响应与列表更新稳定