JavaScript监控系统的核心价值在于通过采集和分析应用运行时的性能数据，帮助开发者发现潜在的性能瓶颈，提升用户体验。要实现高效的性能监控，首先需要明确需要采集的核心性能指标，再通过合适的API完成数据采集，最后对数据进行结构化分析。
需要采集的核心性能指标
JavaScript监控系统的性能指标可以划分为页面加载、运行时、资源请求三大类，每类指标对应不同的用户场景问题。
页面加载类指标
- 首屏加载时间：用户打开页面到首屏内容完全渲染完成的时间，直接影响用户的第一印象。
- 白屏时间：从页面导航开始到第一个非空白内容渲染的时间，反映页面初始响应速度。
- DOM加载完成时间：HTML文档解析完成，DOM树构建完成的时间，对应
DOMContentLoaded事件触发时机。
运行时类指标
- 长任务耗时：主线程执行超过50ms的任务，这类任务会阻塞用户交互，导致页面卡顿。
- FPS帧率：页面每秒渲染的帧数，低于60FPS时用户能明显感知到画面不流畅。
- 内存占用：页面运行时的内存使用情况，内存持续增长可能意味着存在内存泄漏。
资源请求类指标
- 资源加载耗时：静态资源（JS、CSS、图片等）从发起请求到加载完成的总时间。
- 请求错误率：资源请求失败的数量占总请求数量的比例，反映资源服务的稳定性。
性能指标采集实现方法
大部分性能指标可以通过浏览器提供的标准API完成采集，下面分别介绍核心指标的采集代码实现。
页面加载指标采集
使用PerformanceTiming API可以获取页面加载各阶段的耗时数据，相关时间节点都可以通过该API的时间戳计算得到。
// 等待页面加载完成后采集加载指标
window.addEventListener('load', () => {
const timing = performance.timing;
// 白屏时间：首次渲染时间 - 导航开始时间
const whiteScreenTime = timing.domLoading - timing.navigationStart;
// DOM加载完成时间：DOMContentLoaded事件触发时间 - 导航开始时间
const domReadyTime = timing.domContentLoadedEventEnd - timing.navigationStart;
// 首屏加载时间：load事件触发时间 - 导航开始时间
const firstScreenTime = timing.loadEventEnd - timing.navigationStart;
const loadMetrics = {
whiteScreenTime: Math.round(whiteScreenTime),
domReadyTime: Math.round(domReadyTime),
firstScreenTime: Math.round(firstScreenTime)
};
console.log('页面加载指标采集完成：', loadMetrics);
// 此处可将数据上报到监控系统
});
运行时指标采集
长任务可以通过PerformanceObserver监听longtask条目获取，FPS可以通过计算两次requestAnimationFrame的时间差得到。
// 采集长任务指标
if ('PerformanceObserver' in window) {
const longTaskObserver = new PerformanceObserver((list) => {
const longTasks = list.getEntries();
longTasks.forEach(task => {
const taskInfo = {
startTime: Math.round(task.startTime),
duration: Math.round(task.duration),
attribution: task.attribution
};
console.log('长任务采集：', taskInfo);
// 上报长任务数据
});
});
longTaskObserver.observe({ entryTypes: ['longtask'] });
}
// 采集FPS指标
let lastTime = performance.now();
let frameCount = 0;
function calculateFPS() {
frameCount++;
const currentTime = performance.now();
if (currentTime - lastTime >= 1000) {
const fps = Math.round((frameCount * 1000) / (currentTime - lastTime));
console.log('当前FPS：', fps);
// 上报FPS数据
frameCount = 0;
lastTime = currentTime;
}
requestAnimationFrame(calculateFPS);
}
requestAnimationFrame(calculateFPS);
资源请求指标采集
资源请求的性能数据可以通过PerformanceObserver监听resource条目获取，同时可以统计资源请求的成功失败情况。
// 采集资源请求指标
if ('PerformanceObserver' in window) {
const resourceObserver = new PerformanceObserver((list) => {
const resources = list.getEntries();
resources.forEach(resource => {
const resourceInfo = {
name: resource.name,
type: resource.initiatorType,
duration: Math.round(resource.duration),
size: resource.transferSize
};
console.log('资源加载指标采集：', resourceInfo);
// 上报资源数据
});
});
resourceObserver.observe({ entryTypes: ['resource'] });
}
// 统计资源请求错误率
let totalRequest = 0;
let errorRequest = 0;
// 监听资源加载错误
window.addEventListener('error', (event) => {
if (event.target !== window) {
totalRequest++;
errorRequest++;
const errorRate = Math.round((errorRequest / totalRequest) * 100);
console.log('资源请求错误率：', errorRate + '%');
}
}, true);
性能指标分析思路
采集到性能数据后，需要通过对数据的整理、对比、归因，才能定位到具体的性能问题。
数据分层统计
可以按照页面、设备类型、网络环境、用户地域等维度对采集到的数据进行分组统计，例如同一页面在4G网络和WiFi网络下的首屏加载时间差异，能够快速定位是否和网络环境相关的性能问题。
阈值告警设置
为不同指标设置合理的阈值，例如首屏加载时间超过3秒、FPS低于50、长任务单次耗时超过100ms时触发告警，帮助开发者第一时间发现异常性能问题。
趋势对比分析
将同一指标按时间维度做趋势对比，例如最近7天的首屏加载时间变化趋势，如果指标持续升高，说明最近的代码变更可能引入了性能问题，可以结合发版记录定位具体变更内容。
异常归因分析
当某个指标出现异常时，结合关联指标做归因，例如首屏加载时间变长，同时资源加载耗时增加，大概率是某个静态资源体积过大或者CDN节点异常导致，可进一步排查对应资源的情况。
注意事项
- 性能采集代码本身不能影响页面正常运行，尽量在页面加载完成后异步执行采集逻辑，避免阻塞主线程。
- 采样率需要合理设置，高频访问的页面可以适当降低采样率，避免大量上报数据增加服务器压力。
- 采集的数据需要做脱敏处理，不能包含用户的隐私信息，例如用户ID、手机号等内容。
JavaScript性能监控指标采集性能分析修改时间：2026-06-17 10:36:44