PerformanceObserver 指标采集与 IndexedDB 持久化实践

概述性能指标采集有助于优化端到端体验。本文给出采集与持久化方案。采集与持久化const supportsPO = typeof PerformanceObserver === 'function'; function openDB(name) { return new Promise((resolve, reject) => { const r = indexedDB.open(name, 1); r.onupgradeneeded = () => { const db = r.result; if (!db.objectStoreNames.contains('metrics')) db.createObjectStore('metrics', { autoIncrement: true }); }; r.onsuccess = () => resolve(r.result); r.onerror = () => reject(r.error); }); } async function saveMetric(rec) { const db = await openDB('perf'); const tx = db.transaction('metrics', 'readwrite'); tx.objectStore('metrics').add(rec); await new Promise((resolve, reject) => { tx.oncomplete = resolve; tx.onerror = () => reject(tx.error); }); db.close(); } function startCollect() { if (!supportsPO) return; const po = new PerformanceObserver(list => { for (const entry of list.getEntries()) saveMetric({ name: entry.name, value: entry.value, ts: entry.startTime }); }); po.observe({ type: 'largest-contentful-paint', buffered: true }); po.observe({ type: 'first-input', buffered: true }); po.observe({ type: 'layout-shift', buffered: true }); }