如何监控js性能

如何监控 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 和自定义事件来记录和报告性能指标。