Chrome浏览器performance工具
摁 Control+shift+I 打开开发者工具就可以找到 performance (旧版本也叫Timeline)
使用方法
- 点击面板左上方圆形按钮开始记录，然后操作页面，一段时间之后在面板上点击停止，即可得到这段操作过程的记录结果。
- 点击面板上左上方刷新按键，可以重新加载页面并获得该过程记录结果。
点击面板左上方禁止符号，可以清除记录结果。
Network和CPU两个下拉框选项的作用是模拟移动端运行环境。
缩略图中一共分为5行，从上到下依次是：
- FPS，表示每一秒的帧数，用来衡量页面动画的性能指标。fps图中绿色柱状越高表示体验越好。若出现红色长条则表示在该时间端出现长帧，可能影响用户体验。
- CPU，表示cpu的使用情况，其中颜色含义和底下的
Summary模块中相同。从该行中颜色块的跨越时长可以分析哪类事件消耗的时间较长，从而找到性能瓶颈。 - NET，每一个颜色条表示加载一种文件。蓝色表示html文件、黄色表示js文件、紫色表示样式文件、绿色表示媒体文件、灰色表示其他资源。
- 缩略图，对应每一时刻页面的显示情况。通过勾选上方
Screenshots来控制显示或隐藏。 HEAP，表示堆内存使用情况。可通过勾选上访
Menory来控制显示或隐藏。详情图版块和Summary面板
蓝色(Loading)：网络通信和HTML解析
黄色(Scripting)：JavaScript执行
紫色(Rendering)：样式计算和布局，即重排
绿色(Painting)：重绘
灰色(other)：其它事件花费的时间
白色(Idle)：空闲时间
- summary:统计报表
- Bottom-Up:事件时长顺序
- Call Tree:事件调用顺序
- Event log:事件发生的先后顺序
总结
本文介绍了如何通过Performance查看CPU、FPS以及对应的耗时操作，知道这些后就可以定向去优化了。
FPS部分，如果红线比较多则代表CPU压力比较大，界面卡顿，如果绿线比较多则代表界面流畅，不卡顿
CPU部分，如果黄色区域高且持续出现，代表该处CPU压力较大，如果黄色区域不高，则代表CPU正常运行，页面整体性能很好。
Frames部分，代表在执行一次requestAnimationFrame时页面的帧率以及每帧执行时间。
Main部分，x轴代表随着时间推移的记录，y轴代表调用栈（执行事件），x轴事件越长执行时间越长，代表该处函数有优化空间，如果执行时间特别长浏览器会强势回流，查看y轴可以看到具体函数定向去优化。点击Main中的事件查看Summary中的可以看到各个阶段（Scripting、Rendering等）执行时间，以及对应事件链接到的源代码位置。