碰到这样的一个问题，用户反馈页面的图表一直加载不出来，页面还卡死
打开链接页面，打开控制台 Network
看到有个请求一直pending，结合用户描述，页面一直loading,似乎验证了我的怀疑：后端迟迟没有相应。
但是，还有个现象，页面卡死了，后端没响应怎么能导致页面卡死呢？
既然是页面卡死，那无非是CPU满了，或者内存满了
打开浏览器性能监控面板看看
可以看到内存没有问题，但是CPU使用率一直100%，还有DOM节点2万多，显然，异常出在了这两个地方，但是有没有什么关联呢？
首先思考，什么会导致CPU使用率长期100%呢？
1. js代码一直在运行 2. 页面节点太多，渲染卡住 3.两者皆有
这个时候我们就需要使用 Perfomance 分析了
我们发现，主要运行时间都是js运行，有一个长任务一直没有释放，接下来我们可以通过下钻上图标红的Long Task就可以定位出问题的代码了。
回到最开始的Network，也不难发现，是在处理这个pending中的请求的结果时，js一直在运行,我们也可以通过找出本次调用来排查相关代码
文章来源：https://www.toymoban.com/news/detail-694437.html
不过这一块是比较让人疑惑的，控制台不应该运行在独立的进程吗，为什么会受js运行影响？这个是我们讨论的话题外了。
文章来源地址https://www.toymoban.com/news/detail-694437.html
到了这里，关于记1次前端性能优化之CPU使用率的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
