执行时间与长任务：javascript单线程特性使超50ms的长任务阻塞主线程，引发卡顿，可通过performanceobserver监控并优化大量dom操作、复杂计算等问题。2. 脚本加载与解析耗时：js文件大小和加载顺序影响首屏速度，利用resource timing api分析下载与执行时间，采用代码分割、懒加载、defer/async等策略优化。3. 内存使用情况：内存泄漏由事件监听未解绑、闭包引用等引起，可通过chrome devtools内存快照和performance.memory实时监控堆内存与gc频率。4. fps与主线程繁忙度：javascript执行过久降低fps，影响流畅度，使用requestanimationframe监测帧率，结合长任务数据判断js阻塞情况。综合四大指标接入监控系统可有效提升用户体验。
前端性能对用户体验至关重要，JavaScript 作为网页中动态交互的核心部分，其执行效率直接影响页面加载速度、响应能力和整体流畅度。要优化 JavaScript 性能，首先要掌握关键的监控指标，并通过分析这些指标定位瓶颈。
1. 执行时间与长任务（Long Tasks）
JavaScript 是单线程运行的，长时间执行的脚本会阻塞主线程，导致页面卡顿、点击无响应等问题。
- 长任务：指持续超过 50ms 的任务。根据 RAIL 模型，用户输入应在 100ms 内得到响应，因此超过 50ms 的任务就可能影响体验。
- 使用 PerformanceObserver 监听 longtask 来识别耗时操作：
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.warn('长任务 detected:', entry);
// 上报到监控系统
}
});
observer.observe({ entryTypes: ['longtask'] });
- 常见诱因包括：大量 DOM 操作、复杂计算、同步 Ajax 请求、未分片的大循环。
2. 脚本加载与解析耗时
JS 文件过大或加载顺序不当会导致首屏延迟。
- 关注 Resource Timing API 中 JS 资源的各个阶段耗时：
- 关键字段：
duration（总耗时）、responseEnd - fetchStart（网络+服务器时间）、scriptTime（执行时间）。 - 可通过以下方式获取 JS 加载数据：
performance.getEntriesByType('resource')
.filter(res => res.initiatorType === 'script')
.forEach(res => {
console.log(`${res.name}: 下载耗时 ${res.responseEnd - res.startTime}ms`);
});
- 优化建议：代码分割、懒加载、使用 defer/async、压缩和 Gzip。
3. 内存使用情况
内存泄漏或频繁垃圾回收会引发卡顿甚至崩溃。
立即学习“Java免费学习笔记（深入）”；
- 监控指标包括：堆内存大小、对象数量、GC 频率。
- 使用 Chrome DevTools 的 Memory 面板进行快照比对，查找未释放的引用。
- 在代码中可通过 Memory Info 获取实时数据（仅 Chrome）：
if (performance.memory) {
console.log(`JS 堆使用: ${performance.memory.usedJSHeapSize / 1024 / 1024} MB`);
}
- 常见问题：事件监听未解绑、闭包引用、全局变量积累。
4. FPS 与主线程繁忙度
FPS（每秒帧数）反映页面流畅度，JavaScript 执行过久会直接拉低 FPS。
- 理想动画需维持 60fps，即每帧 16.6ms。若 JS 占用主线程过久，渲染会被推迟。
- 使用 requestAnimationFrame 回调估算帧率：
let lastTime = performance.now();
let frameCount = 0;
<p>function tick(now) {
frameCount++;
if (now - lastTime >= 1000) {
console.log(<code>当前 FPS: ${frameCount}</code>);
frameCount = 0;
lastTime = now;
}
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
- 结合 Long Task 数据可判断是否因 JS 阻塞导致掉帧。
基本上就这些。通过综合监控执行时间、加载性能、内存和帧率，可以全面评估 JavaScript 的实际影响。将这些指标接入前端监控系统（如 Sentry、自建埋点），有助于在真实用户场景中发现并解决问题。不复杂但容易忽略。
