记一次生产问题的排查,页面直接崩掉,让我领略了算法的重要性

本文记录了一次生产环境中由于递归算法导致的页面卡死问题。问题起因是处理大量数据时,递归查找算法引起的内存溢出。通过分析递归算法的空间复杂度,发现其与最大递归树深度成正比。优化方案是将递归改为广度优先遍历,从而解决了页面卡死问题,强调了在处理大数据时算法选择的重要性。
摘要由CSDN通过智能技术生成

前段时间,客户反馈,有个PC端的功能页面,一点开就卡死,通过查看网络请求,发现有个部门组织架构树的请求数据有点大,共有两万条数据,1.57M。刚开始我以为是表单中的部门选择框渲染的时候,一次性渲染的dom节点过多,把页面内存撑爆了。于是我把项目中使用的antd3的TreeSelect组件,升级到具有无限滚动加载功能的antd5版本,始终只渲染10条数据,按理说页面卡死的问题应该就消失了。结果页面操作几次之后,页面仍旧百分之百会崩掉, 页面卡死问题并未彻底解决。

于是我沉下心来,把出问题的页面的逻辑从头到尾看了一遍,发现有一处采用递归方式查找某个部门id在不在部门树之中的逻辑,可能存在性能问题。没优化之前的写法是这样的:


const findTreeItem = (data, id) => {
  for (let i = 0,len=data.length; i < len; i++) {
    let item = data[i];
    if (item.id === id) {
      return true;
    } else {
      if (item.children) {
        if (findTreeItem(item.children, id)) {
          return true;
        }
      }
    }
  }
};
const isInclude = findTreeItem(treeData,deptId);

这种写法的缺点是,当树的层级很深时,可能会引起暴栈。让我们分析一下这种递归算法的空间复杂度。假设要判断id="1-1-1-0"是否存在于treeData中

cons
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值