Performance性能测试工具使用

第一部分

FPS：主要和动画性能有关，表示每秒的帧数。上图中出现了红色的长条，说明这部分动画性能有卡帧，需要进行优化，而像下图这样，绿色长条，就说明性能还可以，而绿色长条越高，说明性能越好
CPU：和底部的summary对应，显示了页面加载过程中，各阶段对CPU的占用时间，占用时间越多，表示该部分越需要被优化，其中不同的颜色就对应着不同的部分，相应部分对应的内容可以在底部的summary里面看到，不同颜色含义为

蓝色（Loading）：网络通信和html解析
黄色（Scripting）：JavaScript执行
紫色（Rendering）：样式计算和布局，对css的解析，即重排
绿色（Painting）：重绘
灰色（System）：其他事件花费的时间
白色（Idle）：空闲时间
NET：主要显示了请求的顺序和花费的时间，深蓝色的优先级比浅蓝色高，我们也可以在下面的network查看更具体的顺序和耗时
HEAP：表示js堆内存的消耗线的上升就表示这个时间点js执行消耗了一些内存

第二部分（main）

记录具体资源的使用情况
JS Heap，js堆，documents文档，Nodes文档节点数，Listeners监听，GPU Meory GPU内存

第三部分

Summary

如图，这里是CPU占用时间的总结，与上面不同的是，上面展示的是一个各个部分在不同时间的消耗，而这里采取的是一个扇形图的方式，可以让我们直观地看到各个部分CPU消耗的占比，我们也就能更好地找到需要优化的内容

Bottom-Up

指各个部分具体的内存消耗对应的一些内容，根据时间消耗的长短，列出事件列表

Call Tree

以树形图的形式展示各项事件，这样事件调用跟踪会显得更为详细和直观

Event Log

事件日志，可以让我们更好地看到事件的详细信息