生产环境集成 web-vitals 需确保指标准确、不阻塞主线程、不丢失、带上下文且可归因：spa 中路由切换后重置 cls、过滤已卸载元素的 lcp；ssr 页面初始化前检查 readystate；用 sendbeacon 可靠上报，压缩字段名；仅生产启用、节流高频指标、携带路由/设备/网络等上下文；与 vue/react 联动打点，对齐导航与渲染链路。
在生产环境集成 web-vitals 上报真实用户体验数据，关键不是“装上就完事”，而是让指标准确、不干扰主线程、不丢失、带上下文、可归因。以下是经过验证的落地要点：
确保指标采集时机正确，避免数据失真
单页应用（SPA）中，路由切换会重置部分指标逻辑，若不干预，LCP 可能被清零、CLS 会持续累加——导致统计完全失真。
- 每次软导航（如
router.push或history.pushState）后，手动调用onCLS的reset()方法（v3+ 支持，旧版需 patch） - LCP 回调中检查
entries[entries.length - 1].element?.isConnected，跳过已卸载组件的节点，防止上报销毁后的旧元素 - SSR 页面中，FCP 可能在 JS 执行前就完成，初始化监听前加判断：
if (document.readyState === 'interactive' || document.readyState === 'complete')
用 sendBeacon 可靠上报，不丢关键数据
用户关闭标签页、跳转或刷新时，fetch / xhr 请求大概率被浏览器终止。只有 navigator.sendBeacon() 被规范保证「尽力发送」。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- payload 必须是
ArrayBuffer、Blob、FormData或URLSearchParams；不能直接传 JSON 字符串 - 推荐压缩字段名：例如
{lcp: 1842, cls: 0.032, p: '/dashboard', d: 'mobile'}，比完整英文字段减少约 40% 体积 - 后端不支持二进制？可用
new Blob([JSON.stringify(data)], {type: 'application/json'})包一层再发
按需启用 + 节流 + 关联业务上下文
监控脚本本身不能成为性能瓶颈，尤其在低端安卓机上频繁采样或打点会明显拖慢 FPS 和 TTI。
- 只在生产环境启用：
if (process.env.NODE_ENV === 'production') - 对 CLS、INP 等高频变化指标，开启节流（如每 5 秒最多上报一次变化量），避免刷屏式上报
- 每次上报必须携带业务上下文：当前路由路径、设备类型（
navigator.userAgent粗判）、网络类型（navigator.connection?.effectiveType）、是否首屏（标记isFirstVisit: !sessionStorage.getItem('seen')）
与 Vue/React 框架层联动，补全体验链路
Web Vitals 是用户侧黄金指标，但单独使用无法定位问题根源。需和框架行为对齐：
- 在
router.beforeEach记录导航开始，在router.afterEach触发performance.mark('route_end')，再用measure计算整条链路耗时 - 组件
onMounted时打点performance.mark('comp_mount_start')，配合nextTick再打一次，差值即为实际渲染延迟 - 对高 CLS 风险区域（如异步加载的推荐模块），提前设置占位图或
size-adjust字体加载策略，并在 DOM 插入后主动触发getCLS().then(v => console.log('post-insert cls:', v))验证效果
