继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

CheongHu
关注TA
已关注
手记 16
粉丝 0
获赞 22

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)

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP