记1次前端性能优化之CPU使用率

碰到这样的一个问题，用户反馈页面的图表一直加载不出来，页面还卡死

打开链接页面，打开控制台 Network

看到有个请求一直pending，结合用户描述，页面一直loading,似乎验证了我的怀疑：后端迟迟没有相应。

但是，还有个现象，页面卡死了，后端没响应怎么能导致页面卡死呢？

既然是页面卡死，那无非是CPU满了，或者内存满了

打开浏览器性能监控面板看看

可以看到内存没有问题，但是CPU使用率一直100%，还有DOM节点2万多，显然，异常出在了这两个地方，但是有没有什么关联呢？

首先思考，什么会导致CPU使用率长期100%呢？

 1. js代码一直在运行  2. 页面节点太多，渲染卡住  3.两者皆有

这个时候我们就需要使用 Perfomance 分析了

我们发现，主要运行时间都是js运行，有一个长任务一直没有释放，接下来我们可以通过下钻上图标红的Long Task就可以定位出问题的代码了。
 

回到最开始的Network，也不难发现，是在处理这个pending中的请求的结果时，js一直在运行,我们也可以通过找出本次调用来排查相关代码

不过这一块是比较让人疑惑的，控制台不应该运行在独立的进程吗，为什么会受js运行影响？这个是我们讨论的话题外了。