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 });

}