Performance Navigation Timing 采集与首屏分析实践

概述首屏性能直接影响用户体验。本文展示导航与首屏指标采集与持久化方法。采集与持久化function openDB(name) { return new Promise((resolve, reject) => { const r = indexedDB.open(name, 1); r.onupgradeneeded = () => { const db = r.result; if (!db.objectStoreNames.contains('nav')) db.createObjectStore('nav', { autoIncrement: true }); }; r.onsuccess = () => resolve(r.result); r.onerror = () => reject(r.error); }); } async function saveNav(rec) { const db = await openDB('perf-nav'); const tx = db.transaction('nav','readwrite'); tx.objectStore('nav').add(rec); await new Promise((res, rej) => { tx.oncomplete = res; tx.onerror = () => rej(tx.error); }); db.close(); } function collectNav() { const entries = performance.getEntriesByType('navigation'); for (const e of entries) { const n = e; // PerformanceNavigationTiming saveNav({ type: n.type, domContentLoaded: n.domContentLoadedEventEnd - n.startTime, firstByte: n.responseStart - n.requestStart, load: n.loadEventEnd - n.startTime, ts: n.startTime }); } }