profiling

本文回答：怎么用 Chrome DevTools 抓 vjmap 性能问题 —— Performance 录制、Memory、FPS、WebGL inspector。

一、最重要的 2 个面板

次要：Lighthouse（整体性能）、Rendering（FPS meter、paint flashing）。

二、Performance 录制流程

1. F12 → Performance → 齿轮勾 Screenshots + Memory
2. 按 录制 按钮
3. 做典型操作（缩放、平移、搜索、加载数据）15~30 秒
4. 停止
5. 看 Main thread 的火焰图 / Summary 饼图

重点看：

• 长任务（红色棒条 > 50ms）：那一刻主线程被卡住
• 火焰图里最深的栈 → 通常是罪魁函数

三、常见罪魁定位

四、FPS meter

Chrome → DevTools → Cmd+Shift+P 或 Ctrl+Shift+P → 输入 "rendering" → Show Rendering → 勾 Frame Rendering Stats：

• 右上角显示实时 FPS、GPU memory、DOM nodes 数
• 开发时一直开着

五、Paint flashing

同一个 Rendering 面板，勾 Paint flashing：

• 每次重绘的区域会闪绿色
• 帮助定位"哪些 UI 元素被 over-invalidate"

六、vjmap 内置 metrics

// FX（vjmapext 唯一内置 metrics API）
mapcadLayer.fx.getMetrics();
// 每 bucket 的 active / points / lines / shadertoys 分布

// 实体渲染管线没有公开 metrics API（renderPipeline.getBucketStats 不存在）；
// 用 Performance 录制 / Memory 快照代替

七、Memory Snapshot 步骤

1. Memory → Take heap snapshot（Snapshot 1）
2. 做操作（打开关闭地图 10 次）
3. 点垃圾桶强制 GC
4. 再打 Snapshot 2
5. Comparison 模式对比
6. 搜 Marker / Map / MapCadLayer 看增量

示例：发现 20 个 Marker retained → 查 retainers 路径 → 找到某 Vue 组件没 remove。

八、Allocation instrumentation on timeline

Memory → Allocation instrumentation on timeline → 录制时每次分配都打点：

• 适合找"谁在一直 new 对象"
• 比如 mousemove 里每次 new Point2D → 优化用 pool

九、WebGL inspector（第三方扩展）

Chrome 扩展 Spector.js：

• 录一帧的所有 drawCall
• 看每个 drawCall 的 texture / uniform / buffer
• 用于自定义 WebGL 层调试

十、CPU 限速

DevTools → Performance → 齿轮 → CPU: 4× slowdown：

• 模拟低端机
• 录制后看在慢机器上的表现

十一、性能预算

十二、诊断清单（按顺序排查）

1. 打开 Rendering → Frame Rendering Stats → 观察 FPS 是否稳定 60
2. 如果 < 60：Performance 录 15s
3. 看 Main 栈最宽的函数：
   • vjmap 底座？看 map-style/layer-styles + expressions
   • mapcadLayer 渲染？看 render-buckets + batch-rendering
   • 业务代码？看 event-throttling
4. 内存一直涨 → Memory 对比快照 → memory-leaks

十三、生产环境采样

if (navigator.sendBeacon && window.PerformanceObserver) {
  new PerformanceObserver(list => {
    for (const e of list.getEntries()) {
      if (e.duration > 100) {
        // 长任务 → 上报
        navigator.sendBeacon('/perf', JSON.stringify({
          name: e.name, duration: e.duration, ts: Date.now()
        }));
      }
    }
  }).observe({ type: 'longtask', buffered: true });
}

监控用户真实设备上的长任务。

十四、常见坑

1. 本机跑 60 FPS 就以为没事：生产低端机一大半 30-；必用 CPU slowdown 测。
2. DevTools 关上后 FPS 变好：DevTools 自身开销大；务必 close 后评估。
3. Paint flashing 整片绿：某个高频重绘元素（Marker layer）；迁 Symbol。
4. Memory 数字看 usedJSHeapSize：只反映 JS 堆，不含 GPU 内存；GPU 侧用 DevTools 的 Memory/GPU 面板或观察 webglcontextlost 事件。
5. 录制时间太短（<5s）：看不到模式；至少 15s。

相关

• 总览 → overview
• 事件节流 → event-throttling
• 内存泄漏 → memory-leaks