Angular由一个bug说起之十二：网页页面持续占用CPU过高

随着网络日益发达，网页的内容也更加丰富，形式也更加多样化。而随之而来的性能问题也不容小觑。这篇文章我会根据我在实践中遇到的一个问题来总结，我在面对性能问题的一些解决步骤，希望能对大家有所启发。

查找问题原因

我接触的项目中有数据可视化的功能，在编辑可视化组件时页面会有明显卡顿，并且在页面加载完毕后也能感受到操作不流畅。

这种情况下我们一般使用排除法来查找出现问题的原因。首先查看 Devtool 是否有报错的情况，其次检查网络连接状况。

我使用的浏览器是 Chrome，如果有报错就会在 Console 里面观察到。网络状况我一方面使用 Ping 来测试服务器连接是否异常，另一方面选择下载文件(我下载的是 node.js)来测试网络速度，以此来判断是否网络问题造成的卡顿。

在我完成了对上面两点的检测后我就排除了由代码或网络引发这个问题的可能性。那么接下来很容易就让人想到是否性能出现了不合理的消耗。

关于性能，我们都知道网页所消耗的计算机资源第一是内存，第二是CPU。我用的系统是 Windows，而这两个指标可以在 Task Manager 中查看。