怎样分析Linux JS性能日志
小樊
42
2025-12-21 05:32:47
Linux 下 JS 性能日志分析实操指南
一 明确目标与采集范围
- 明确要回答的问题：是前端页面卡顿、接口慢、Node.js 服务高占用，还是内存泄漏。
- 统一时间基准：所有日志与监控数据加上毫秒级时间戳，便于对齐分析。
- 日志内容建议：
- 前端：记录FP/FCP/LCP/TTI、长任务（long task）、路由切换耗时、关键业务阶段标记。
- Node.js：记录HTTP 请求耗时、数据库/缓存调用耗时、GC 信息、未捕获异常、事件循环延迟（ELU）、关键函数耗时（如用 performance.mark/measure 或中间件计时）。
- 采集方式：
- 前端：使用 Chrome DevTools Performance 录制用户关键路径；生产可用 Lighthouse 做周期性体检。
- Node.js：开发阶段用 node --inspect / --inspect-brk 连接 DevTools；或用 node --prof / --prof-process 生成 V8 日志；服务侧用 PM2 管理并输出日志与指标。
二 命令行快速定位与过滤
- 实时查看与检索：
- 实时跟踪：
tail -f /var/log/node/app.log
- 按时间筛选：
grep '2025-12-21 10:3' /var/log/node/app.log
- 错误与慢请求：
grep -E 'ERROR|WARN|timeout|slow' /var/log/node/app.log
- 结构化字段提取（示例假设日志含 status、method、url、duration、pid）：
- Top N 慢接口：
awk -F'|' '$5 > 1000 {print $0}' access.log | sort -k5 -nr | head -20
- 错误率统计：
awk '$3 ~ /5[0-9]{2}/ {err++; total++} END {printf "Error rate: %.2f%%\n", err/total*100}' access.log
- 按 PID 聚合耗时：
awk -F'|' '{d[$7]+=$5} END {for(p in d) print p, d[p]}' app.log | sort -nrk2 | head
- 系统资源联动排查：
- 资源占用：
top/htop、vmstat 1、iostat -x 1、free -m
- 调用链与阻塞：
strace -p <PID> -T -e trace=network,read,write -o strace.log
- 热点函数/内核事件：
perf top -p <PID> 或 perf record -p <PID> -g -o perf.data && perf report
- 小技巧：为 Node 服务配置 process.env.NODE_ENV=production 与合理的日志级别，避免日志本身成为性能负担。
三 可视化与聚合分析
- 集中化日志平台：
- ELK Stack（Elasticsearch + Logstash + Kibana）：Logstash 解析与丰富日志，ES 存储检索，Kibana 构建P95/P99 响应时间、错误率、吞吐等仪表盘。
- Splunk / Graylog / Fluentd：适合大规模与异构环境的统一采集与告警。
- 典型可视化面板字段：
- 前端/接口：URL、method、status、duration、userAgent、region
- 错误：message、stack、level、url、timestamp
- 资源与进程：CPU%、RSS、HeapUsed、Event Loop Lag
- 告警建议：对P95/P99 突增、5xx 比例上升、ELU 持续偏高、OOM设置阈值告警。
四 Node.js 与前端专用工具链
- Node.js 性能剖析：
- CPU：
node --prof app.js 生成 isolate-*.log，再用 node --prof-process 输出可读报告，定位热点函数与调用栈。
- 内存与快照：结合 Chrome DevTools Memory 面板分析堆快照，排查内存泄漏与对象保留路径。
- 运行期观测：用 PM2 的监控/日志功能或 APM（如 New Relic、Datadog）获取事务追踪、依赖调用耗时、错误追踪。
- 前端性能：
- Chrome DevTools Performance 录制交互/渲染，关注长任务、脚本执行、渲染、绘制阶段。
- Lighthouse 做性能评分与优化清单（可 CLI/CI 集成）。
五 常见瓶颈与优化方向
- 长任务与事件循环阻塞：拆分大任务、使用 setImmediate/MessageChannel/Worker 将任务移出主线程；减少同步阻塞调用。
- 频繁 DOM 与重排重绘：缓存 DOM 引用、批量更新（DocumentFragment）、优先使用 transform/opacity 做动画、简化 CSS 选择器。
- 高频事件：对滚动/输入/窗口 resize 等使用**节流（throttle）/防抖（debounce）**控制触发频率。
- 资源与依赖：压缩与按需加载资源，合并/减少阻塞请求，优化慢查询与缓存命中率。
- 内存泄漏：及时解除引用、避免意外的全局变量、监控 HeapUsed 增长趋势并做快照对比。
