前端性能指标采集与隐私保护（采样/去标识）最佳实践

前端性能指标采集与隐私保护（采样/去标识）最佳实践概述前端性能采集需控制采样比例与数据最小化，避免携带可识别信息。在合规前提下支持持续性能优化。指标采集type PerfEvent = { url: string; lcp?: number; fid?: number; cls?: number; ts: number }

function collectPerf(): PerfEvent {

const nav = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming

const lcp = (window as any).__lcp || undefined

const fid = (window as any).__fid || undefined

const cls = (window as any).__cls || undefined

return { url: sanitizeUrl(location.href), lcp, fid, cls, ts: Date.now() }

}

采样控制class RateSampler {

constructor(private rate: number) {}

allow(): boolean { return Math.random() < this.rate }

}

const sampler = new RateSampler(0.1) // 10%采样

去标识与脱敏function sanitizeUrl(u: string): string {

try {

const url = new URL(u)

url.search = ''

return url.origin + url.pathname

} catch { return '/' }

}

function redactPayload(p: PerfEvent): PerfEvent {

return { ...p, url: sanitizeUrl(p.url) }

}

上报示例async function reportPerf(p: PerfEvent) {

if (!sampler.allow()) return

const payload = JSON.stringify(redactPayload(p))

await fetch('/perf/report', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: payload })

}

运维要点严格控制采样比例并动态调整URL与参数去标识，禁止携带PII仅采集必要指标并保留上报审计通过采样与去标识，可在保障隐私合规的同时持续提升前端性能体验。