必须在最开头同步注册PerformanceObserver，否则FCP、LCP等首屏指标永久丢失；仅订阅navigation和paint两类entryTypes；上报用sendBeacon()；低端设备跳过longtask监听。

必须在 最开头同步注册，否则首屏关键指标（如 FCP、LCP）直接丢失。

为什么不能等 DOMContentLoaded 或用 async 脚本加载

PerformanceObserver 不会回溯历史事件。浏览器一旦触发 first-contentful-paint，而 observer 还没注册，这条记录就永久丢弃——performance.getEntriesByType('paint') 后续调用也拿不到。

• 典型错误：把初始化脚本放在 底部、或加 async / defer 属性
• 更隐蔽的坑：用 setTimeout(() => new PerformanceObserver(...), 0)，哪怕只延迟一帧，FCP 也大概率已发生
• 兼容性兜底不是理由：Safari、老 Android WebView 虽不支持 entryTypes: ['paint']，但 performance.timing 仍可用；而 Chrome/Firefox/Edge 新版本里，错过注册 = 零数据

只订阅 navigation 和 paint 两类 entryTypes

全量监听 performance.getEntries() 会导致内存暴涨、上报体积翻倍、后端解析失败——尤其 SPA 场景下，resource 条目可能每秒新增数十条（字体、图标、懒加载图片）。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 必须监听 navigation：获取 domInteractive、loadEventEnd、TTFB 等完整生命周期时间点
• 必须监听 paint：这是唯一能稳定捕获 first-contentful-paint 和 largest-contentful-paint 的方式；measure 或 mark 打点无法替代
• SPA 注意去重：检查 entry.initiatorType === 'navigation'，过滤掉由 fetch 触发的伪 navigation 条目

上报必须用 navigator.sendBeacon()，且禁止在回调中操作 DOM

监控脚本自身就是性能瓶颈源。任何阻塞行为都会拖慢 HTML 解析和首屏渲染。

立即学习“前端免费学习笔记（深入）”；

• 绝对禁用：XMLHttpRequest 同步发送、document.querySelector、console.log（DevTools 开启时序列化开销极大）
• 必须用 navigator.sendBeacon()：异步、不阻塞页面卸载、保证送达率；不要 fallback 到 fetch() + keepalive: true，iOS Safari 对后者支持不稳定
• 所有数据提取必须在回调内完成：entry.startTime、entry.duration、entry.name 等字段要立即读取并缓存，别留到上报前再取

最容易被忽略的一点：低端设备（navigator.hardwareConcurrency ）应主动跳过 <code>longtask 监听——它依赖高频率轮询，会显著拉高主线程耗时，反而掩盖真实卡顿问题。优先保 paint + navigation，这才是用户真实感知的底线。