已采纳
回答正文
回复
讨论正文
该问题的正文、回答与讨论。
背景
React 18 + Vite 5 的 B 端中台 SPA,约 220 个路由,自研 RUM SDK 用 PerformanceObserver 采 Core Web Vitals(LCP/CLS/INP)+ performance.getEntriesByType('navigation') 取 TTFB/FCP,采样 100%,日均 UV 约 12 万,落 ClickHouse 出大盘。我们的核心交互是用户点菜单从 A 路由跳到 B 路由(history.pushState,不整页 reload)。
现象(这是真正的卡点)
PerformanceNavigationTiming 的 navigationStart 始终是首次加载那一刻。用户从 A 跳到 B,B 路由的 TTFB/FCP 读到的还是首页的数字,对"这次路由切换花了多久"完全失明。performance.mark('route-start') / mark('route-ready') + measure 只能拿到一个裸 ms 数字(比如 A→B 平均 3.8s、P95 6.1s),但拿不到 TTFB/FCP/INP 这种"用户感知"维度,也没法和 Web Vitals 大盘对齐、没法算分位、没法设阈值告警。已尝试的排查
PerformanceObserver 监听 resource entry 等接口:能拿到接口耗时,但无法区分"路由切换触发的请求"和"页内组件懒加载的请求",同一时刻混在一起,归因不了;mark/measure 手动打点:只有裸 ms,缺 TTFB/FCP 语义,且不同路由"ready"的定义不统一(有的等接口、有的等首帧、有的等交互);期望得到的答案形态
PerformanceObserver 的哪类 entry?History API 拦截?React Router 的 useBlocker/useNavigation?自定义"伪 navigation"?),以及"路由切换的可交互完成"到底该怎么定义、卡在哪个里程碑打点;route_from/route_to/route_ttfb/route_fcp/route_ready)、和 Web Vitals 怎么对齐、分位怎么算;