因为PerformanceObserver只能捕获注册后发生的性能条目，而FCP、domInteractive等关键指标在HTML解析阶段即触发并丢弃，错过则永久丢失；必须内联于<head>第一行同步执行，禁用async/defer及DOM操作。
为什么不能在 DOMContentLoaded 后注册 PerformanceObserver
因为 PerformanceObserver 只能捕获注册之后发生的性能条目，而关键指标如 first-contentful-paint、domInteractive 在 HTML 解析阶段就已触发并丢弃。一旦错过，浏览器不会补发——这和事件监听器不同，它不是“订阅”，而是“快照流订阅”。常见错误包括把监控脚本放在 <body> 里、用 async 加载、或塞进第三方 SDK 初始化逻辑之后。
HTML 注入必须发生在解析开始前的 <head> 第一行
注入位置决定成败：只有内联在 <head> 最顶部（且无任何前置标签或空白字符）的脚本，才能在 HTML 解析器开始解析文档时立即执行。Nginx 的 sub_filter 或响应体中间件替换需满足：
– 匹配 <head> 开始标签后首个非空白字符位置
– 替换内容为 ≤1.5KB 的 IIFE，不依赖 document 或任何 DOM API
– 禁止包含 console.log、querySelector、getBoundingClientRect 等阻塞/重排操作
示例注入片段（必须原样插入）：
!function(){if("performance"in window){var o=new PerformanceObserver(function(l){l.getEntries().forEach(function(e){"paint"===e.entryType&&"first-contentful-paint"===e.name&&navigator.sendBeacon("/api/p",JSON.stringify({t:"fcp",v:e.startTime}))});});o.observe({entryTypes:["paint"]})}}();
中间件注入时如何避免破坏原有 HTML 结构
常见翻车点不是逻辑写错，而是替换污染了原始结构：
立即学习“前端免费学习笔记（深入）”；
- Nginx
sub_filter默认不支持正则捕获组，若用sub_filter '<head>' '<head><script>...</script>';，可能因空格、换行或大小写（<HEAD>）失效 - Node.js 中间件（如 Express 的
res.write拦截）若未按 chunk 边界切分，可能把<head>拆成两段，导致注入失败或 HTML 解析异常 - 注入脚本中不能含未转义的
</script>字符串，否则会提前终止 script 标签解析（哪怕它在字符串字面量里） - 若页面已存在 CSP 头且未声明
'unsafe-inline'，内联脚本会被直接屏蔽——此时必须改用外部<script src=...>+ nonce 方式，但 nonce 值需由服务端动态注入并同步到 CSP 头
SPA 场景下 navigation 条目怎么过滤伪触发
performance.getEntriesByType('navigation') 在单页应用中会混入大量由 fetch 或 history.pushState 触发的假 navigation 条目，它们的 initiatorType 是 xmlhttprequest 或 other，而非 navigation。真实首屏只应取：
entry.initiatorType === 'navigation'- 且
entry.type === 'navigate'（排除 reload / back_forward） - 且
entry.startTime接近页面打开时间（可比对Date.now()差值是否
漏掉这个判断，上报的 domContentLoadedEventEnd 和 loadEventEnd 很可能来自某个无关的路由跳转，完全失真。
