chrome Dev Tools 性能分析 performance
chrome 的performance用来分析性能优化性能非常好用，下面以一个页面来举例
性能分析
性能分析最好使用隐私无痕模式，以保证干净的环境下，避免chrome插件对性能分析结果的影响
- Performance 性能面板 ：可看到白屏时间，FPS，资源加载曲线，内存变化
- Memory 内存面板，记录某个时刻的页面内存情况，用于分析内存泄露
详细拆分
overview- FPS
页面每秒帧数。用来分析动画的性能指标。fps=60性能很好
FPS（frames per second）是用来分析动画的一个主要性能指标。让页面效果能够达到>=60fps(帧)/s的刷新频率以避免出现卡顿。能保持在60的FPS的话，那么用户体验就是不错的。
为什么是60fps?
我们的目标是保证页面要有高于每秒60fps(帧)的刷新频率，这和目前大多数显示器的刷新率相吻合(60Hz)。如果网页动画能够做到每秒60帧，就会跟显示器同步刷新，达到最佳的视觉效果。这意味着，一秒之内进行60次重新渲染，每次重新渲染的时间不能超过16.66毫秒。
fps<24 会让用户感觉到卡顿，人眼的识别主要是24帧
FPS chrome最新版需要开启
开启后可以看到fps
红色块标识长时间帧，很容易遇到卡帧，有红色的地方就是这块有问题
overview-main火焰图
Main中展示的是火焰图，也就是函数调用的堆栈火焰图
x轴表示时间，最上面的第一条就是事件触发的地方，直到结束，这条线是最长的
y轴表示调用的函数，函数中还包含依次调用的函数，越到下面数量越少（瀑布）
不同颜色代表不同的事件类型，以下对常见的事件类型进行区分
Parse HTML（蓝色）: chrome 进行HTML解析
Event Script（橙色）: Javascript事件（例如 mousedown）
Layout（粉色）: 样式计算和布局，即重排
Recalculate style（粉色）: 样式计算和布局，即重排
Paint（绿色）: 合成的图层被绘制到显示画面的一个区域
Composite（绿色）: Chrome的渲染引擎合成了图像层
识别问题
在火焰图里有很多的task，如果是耗时长的task ，右上角就有红色三角号，这是chrome自动识别的有问题的部分，点击任务，就可以在下面统计看到具体信息
