如何监控 JavaScript 性能？测量页面加载时间：使用 Performance API 测量首次渲染时间和完全加载时间。分析脚本执行时间：使用 console.time() 或 PerformanceObserver 计算脚本执行持续时间。监控内存使用情况：利用 Memory.usage() API 或 Chrome DevTools 测量 JS 堆内存分配。跟踪网络请求：使用 PerformanceObserver 或 Chrome DevTools 分析 HTTP 请求的持续时间和大小
如何监控 JavaScript 性能
1. 初始加载时间
-
测量页面首次渲染时间 (FCP)：使用
Performance.getEntriesByType("navigation")获取导航性能条目并检查DOMContentLoaded属性。 -
测量页面完全加载时间 (onLoad)：使用
window.performance.timing.loadEventEnd或window.onload事件侦听器。
2. 脚本执行时间
-
使用 console.time()：在脚本前面和后面使用
console.time()和console.timeEnd()来计算执行持续时间。 -
使用 PerformanceObserver：使用
PerformanceObserver创建并观察script条目，获取脚本执行持续时间。
3. 内存使用情况
-
使用 Memory.usage()：使用
Memory.usage()API 测量内存使用量，包括分配的 JS 堆内存。 - 使用 Chrome DevTools：打开 DevTools 的 Performance 面板并选择 Memory 选项卡。
4. 网络请求
-
使用 PerformanceObserver：创建并观察
resource条目，获取 HTTP 请求的持续时间和大小。 - 使用 Chrome DevTools：打开 DevTools 的 Network 面板，查看网络请求的详细信息。
5. DOM 操作
-
使用 MutationObserver：创建
MutationObserver来观察 DOM 更改，并计算操作的持续时间。 - 使用 Chrome DevTools：打开 DevTools 的 Elements 面板，并在 DOM 选项卡中启用 DOM 事件侦听器。
6. 事件侦听器
-
使用 PerformanceObserver：创建并观察
event条目，获取事件处理程序的持续时间。 - 使用 Chrome DevTools：打开 DevTools 的 Event Listener Breakpoints 面板，查看事件侦听器的详细信息。
7. 其他工具
- 第三方脚本监控工具：使用 New Relic、Datadog 或 AppDynamics 等工具来集中监控 JS 性能。
-
自定义性能监控：创建自己的监控脚本，利用
Performance API和自定义事件来记录和报告性能指标。
