Performance monitor
打开路径：
- F12 打开控制台
- 右上角三个点选择 More Tools
- 选择 Performance monitor
Performance monitor 界面展示：
参数说明：
- CPU useage -- 当前 CPU 占用情况。
- JS Heap size -- 堆内存使用情况。
- DOM nodes -- DOM 节点数量
- JS event Listeners -- js 事件监听器的数量
- Documents -- 实时文档资源的数量
- Document frames -- 页面上活动框架的数量（iframe 和 workers）
- Layout/sec -- 浏览器必须重新布局 DOM 的速率
- Style recalc/sec -- 浏览器必须重新计算样式的速率
如何使用
性能监测器(Performance monitor)，通常不需要耗费太多额外的性能，我在日常开发中会将上述参数中的前两项打开，也是就 CPU useage、JS Heap size 。
CPU useage
- 通常是大量的 DOM 渲染/操作，或者非常大的运算量导致的。常见的场景中，例如长列表渲染， 大量的表单渲染，截图等一些功能都会造成 CPU 的上升。 建议在开发过程中关注异常的 CPU 占用情况，这往往都是一个优化点。
Js heap size
- 浏览器有非常强大内存的垃圾回收机制。通常情况下我们 web 开发者不需要太关注内存的使用情况。如果我们关注该参数，可以看见在页面静止不动几秒后渐渐减少，此时就是浏览器的垃圾回收机制在发挥作用。
- 如果出现堆内存持续处于高位，一直没有下降的情况，就需要对业务进行分析，是否有数据处于异常新增的状态，导致无法被浏览器自动回收。常见的异常情况有：定义了大量的闭包，有非常高频的循环一直在给对象赋新值，或者有很多定时器一直在执行一些代码。
js 内存详解：
通常情况下，引用类型的数据储存在推内存中。
参考： 使用 chrome-devtools Performance 面板
拓展：
- devTool memory 的简单使用：
- devTool performance 的简单使用
- canvas 内存管理
- safari canvas 尺寸与内存限制
- safari 自动刷新问题
- json.stringify 对于循环引用无法序列化问题
- 栈溢出与尾递归
