碰到这样的一个问题,用户反馈页面的图表一直加载不出来,页面还卡死
打开链接页面,打开控制台 Network
看到有个请求一直pending,结合用户描述,页面一直loading,似乎验证了我的怀疑:后端迟迟没有相应。
但是,还有个现象,页面卡死了,后端没响应怎么能导致页面卡死呢?
既然是页面卡死,那无非是CPU满了,或者内存满了
打开浏览器性能监控面板看看
可以看到内存没有问题,但是CPU使用率一直100%,还有DOM节点2万多,显然,异常出在了这两个地方,但是有没有什么关联呢?
首先思考,什么会导致CPU使用率长期100%呢?
1. js代码一直在运行 2. 页面节点太多,渲染卡住 3.两者皆有
这个时候我们就需要使用 Perfomance 分析了
我们发现,主要运行时间都是js运行,有一个长任务一直没有释放,接下来我们可以通过下钻上图标红的Long Task就可以定位出问题的代码了。
回到最开始的Network,也不难发现,是在处理这个pending中的请求的结果时,js一直在运行,我们也可以通过找出本次调用来排查相关代码
不过这一块是比较让人疑惑的,控制台不应该运行在独立的进程吗,为什么会受js运行影响?这个是我们讨论的话题外了。