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优化方案
简化样式选择器
- 浏览器确定元素上选择器
- 根据选择器，确定对应的样式规则
去除无效的元素
- 计算元素的计算样式的最坏情况是将元素数乘以选择器计数，因为需要针对每种样式至少对每个元素检查一次，以查看其是否匹配。
本文作者：前端首席体验师(CheongHu)
联系邮箱：simple2012hcz@126.com
版权声明： 本文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！
