前端性能优化之js性能问题定位

nodejs接口性能优化

v8-profiler api 分析

需要在接口中添加node profile api

ab压测 产生xxxx.cpuprofile

ab -c 20 -n 2000 "http://xxxxx"

chrome devtool 分析

* 使用chart，可视化查看峰值所在，着重分析js代码
* 使用Tree形式，根据total Time 倒序，查看各自代码耗时self time 

火焰图分析

• 安装

  npm i flamegraph -g

• 生成svg

flamegraph -t  cpuprofile -f xxx.cpuprofile -o cpuprofile.svg

• 查看深色部分，定位js代码

v8-analysis分析

分析v8-profile和heapdump等模块生成的CPU和heap-memeory日志的工具

• 安装

 npm i v8-analytics -g 

• 分析超过200ms代码

 va timeout xxx.cpuprofile 200 --only

v8内置分析工具-tick processor

• 开启

node -prof xxx.js   //生成 islate-xxx-v8.log

• v5.2之后自带处理命令

 node --prof-process islate-xxx-v8.log  //查看Bottom up profile耗时统计，定位问题

• v8 web ui 可视化下查看

  node --prof-process --preprocess  islate-xxx-v8.log > v8.json

  git clone http://github.com/v8/v8.git

v8/tools/profview/index.html加载v8.json 分析峰值

web页面cpu测试

chrome dev 自带 peformance 分析cpu

通过可视化，查看占用长时间的js compute ,rendering

chrome dev javascript profile

通过可视化，查看cpu峰值点。找到峰值高的代码，在看上方调用代码，是否是自己能修改范围的代码。

分析内存

gcore+lldb、llnode适合小型node服务

gcore产生分析文件

 ulimit -c  // 0 表示关闭， 1 开始 

 ulimit -c unlimited 

gcore [-o file] pid

lldb分析

lldb-4.0 -c core.[pid] // 启动node，可以使用core dump生成 node --abort-on-uncatch-exception 

v8-profile dump

heapdump 更简单 手动，不适合

cpu-memory-monitor

web系统使用chrome devtool - memory

通用处理方法

使用requestAnimationFrame

• 避免使用setTimeout或setInterval进行视觉更新；
• 始终使用requestAnimationFrame代替。

Web Workers dom计算

• 将长时间运行的JavaScript从主线程移至Web Workers。
• 不需要DOM访问，则可以将纯计算工作移至 Web Workers。数据处理或遍历（例如排序或搜索）通常非常适合此模型，加载和模型生成也是如此。

微任务

• 使用微任务使DOM在多个框架上进行更改。
• 必须将工作放在主线程上的地方，请考虑将较大的任务分割为微任务，每个微任务不超过几毫秒，并requestAnimationFrame在每个帧的处理程序内部运行.

timeline

• 使用Chrome DevTools的时间轴评估JavaScript的影响

避免对JavaScript进行微优化

只会节省几分之一毫秒的时间 没有优化的必要

css优化方案

简化样式选择器

• 浏览器确定元素上选择器
• 根据选择器，确定对应的样式规则

去除无效的元素

• 计算元素的计算样式的最坏情况是将元素数乘以选择器计数，因为需要针对每种样式至少对每个元素检查一次，以查看其是否匹配。

参考文献：
《Node.js调试指南》(赵坤著)

本文作者：前端首席体验师(CheongHu)