写在前面

使用chrome开发者工具进行性能分析，是作为前端开发者的一个必不可少的技能。但这也需要开发者对性能缺陷有足够的敏感性。才能察觉出程序中存在的问题。

如果某天你发现自己写的程序运行缓慢，你可能需要查看一下是否是DOM元素过多，这时候你就F12打开控制台，并且输入下面的代码，查看DOM元素的总数是否过大：

$$('*').length// 或者是document.querySelectorAll('*').length

结果发现并不是DOM元素的问题。于是你又开始怀疑是不是window对象上挂载了太多的事件监听(EventListeners),于是你再次打开控制台，输入下面的代码，查看window对象上都挂载了哪些事件处理函数：

getEventListeners(window)

结果你可能有发现并不是事件监听过多的问题。这时，你又怀疑到了是否是CPU占用率过高，导致了JS执行缓慢呢？于是你又打开chrome开发工具，切换到性能面板(performance)，对运行时的代码做一段记录，然后查看结果：

通过对summary视图的分析，你可能会怀疑是否是CPU占用过高？

综上，chrome确实也提供了一系列的功能方便我们来定位可能存在的性能问题。但是上面提到的这个查找过程显得过于盲目了，不能很快速的定位了问题的原因。

主角登场

为了解决上面我提出的问题，我们今天的主角闪亮登场了，它就是chrome devtool中的 performance monitor , 它能实时地监控程序运行过程中影响到性能的常见指标，以便于我们快速的找到问题，非常的方便。下面就说说它应该怎么使用：

F12打开开发者工具，然后 MAC ： command + shift + pWIN ： ctrl + shift + p搜索 show performance monitor , 并选择 此时就打开了 performanc monitor

从上图可以看到，这个面板中列出以下的一些指标：

• CPU usage : CPU 占用率。
• JS heap size : JS占用内存大小。如果内存占用一直很大，可以考虑是否有内存溢出，如果内存一直增长却不见回收，考虑是否存在内存泄漏。
• DOM nodes： DOM节点的个数。需要注意的事，这儿的DOM节点个数不仅仅是真实存在于页面上的节点个数，它也包含了内存中DOM节点的个数。
• JS event listeners: 绑定事件的个数
• Document & Document Frames : document 和 iframe 的个数
• Layouts / sec & Style recalcs / sec : 每秒进行重绘 & 重排的次数

有了这些指标，我们就能很方便地实时定位出什么指标出了问题，这样就能方便我们进行下一步的定位，避免了盲目猜测，走弯路。

最后，再给大家介绍一个非常有用性能优化大法

没错！！这个方法就是滑到本文的开头，点个关注，我会持续给大家分享前端干货。