Server-Timing 指标采集与前端持久化实践

概述Server-Timing 可将服务端阶段耗时注入到响应中。前端可读取并持久化用于分析。采集与持久化const supportsPerf = !!(performance && performance.getEntriesByType); function openDB(name) { return new Promise((resolve, reject) => { const r = indexedDB.open(name, 1); r.onupgradeneeded = () => { const db = r.result; if (!db.objectStoreNames.contains('st')) db.createObjectStore('st', { autoIncrement: true }); }; r.onsuccess = () => resolve(r.result); r.onerror = () => reject(r.error); }); } async function saveST(rec) { const db = await openDB('server-timing'); const tx = db.transaction('st','readwrite'); tx.objectStore('st').add(rec); await new Promise((res, rej) => { tx.oncomplete = res; tx.onerror = () => rej(tx.error); }); db.close(); } function collectST() { if (!supportsPerf) return; const entries = performance.getEntriesByType('resource'); for (const e of entries) { const st = e.serverTiming || []; for (const item of st) saveST({ name: e.name, metric: item.name, desc: item.description || '', dur: item.duration, ts: e.startTime }); } }