页面卡死情况排查

Question

1.所有请求都是异步。
2.一开始大概20个异步请求，部分请求较慢大几十秒。
3.多菜单切换之后，页面卡死，无法操作。
都是异步请求，应该不会出现卡死情况，比较困惑，希望大神给出排查或者解决思路。

Answer 1

卡死无非2种情况，要么CPU一直100%没下来，要么内存被撑爆了。

你的提问把解答方向无意识地引导到了异步请求上去了，先按照你的思考，你可以等所有请求全部完成后，不切换菜单，只是滚动页面和点击按钮交互下，看是否卡顿，如果卡顿，那就是这些请求处理后，渲染了大量的内存块。

另外一种情况，就是你菜单切换那里，你可以看看那里是否某个页面和操作重复渲染了大量的页面内存。

观察方法：

Answer 2

一步一步来吧，，刚开始只开五个请求，慢慢的加，看看哪个请求出的问题

Answer 3

卡死先考虑是内存溢出、CPU满负荷导致。
一、重点检查问题中第3点：
3.多菜单切换之后，页面卡死，无法操作。
分析此处代码逻辑是否可能有以下行为：

1. 死循环
2. 未释放的递归调用
3. 组件卸载时未清除定时器
4. 组件重复绑定DOM事件，且事件执行函数中存在批量处理数据或引用DOM对象的行为
5. 循环引用
6. ...

二、其次检查问题中1、2点:

1. 是否存在某个或多个请求返回大量数据，如大的对象，数组等
2. 是否存在部分请求嵌套并在某种情况下出现循环请求处理的情况
3. ...

Answer 4

先把切换菜单时把当前请求cancel调再看问题 Ajax用abort，fetch用AbortController，axios库提供了CancelToken（还是abort）