递归深拷贝导致浏览器网络请求中看不到响应

前言：在项目中发现一个奇怪的问题，一个请求在数据量少的时候非常快速，数据量多的时候非常慢，甚至导致浏览器崩溃，在浏览器的网络抓包中看到有返回状态时200，但是响应迟迟没有返回，并且可以看到等待服务器响应时间非常长。

排查：一开始是定位在后端问题，因为查询类型为1的时候反应速度非常快，查询2时会复现该问题，一开始原因排查是因为该数据源是从第三方拉去数据，并且量大导致速度慢，后端修改为缓存数据并没有解决该问题。后排查是否服务器问题，切换本地服务器仍然无法解决该问题。其中能在服务器端能看到执行完该业务代码非常快。

结果：因为是树的数据，前端使用递归去整理返回的数据，其中用到了深拷贝树节点，偶然发现注释该深拷贝后问题不再复现。其中新的发现是，代码执行会阻塞到浏览器看不到浏览器抓包中的网络响应。代码如下

    // 加工数据
    handlerIndustryResult(result, key = 'name') {
      if(!Array.isArray(result)) return

      const getterIds = (list, res = []) => {
        list.forEach(i => {
          if(i.children) {
            getterIds(i.children, res)
          }
          res.push(i[key])
        })
      }
      const loop = (list, parentNode = null) => {
        list.forEach(item => {
          item._leaf = true
          item.label = item.name
          item.value = item[key]
          // item._parentNode = _.cloneDeep(parentNode)
          item._parentNode = parentNode ? {...parentNode} : null
          if(
            item.children 
            && Array.isArray(item.children) 
            && item.children.length > 0
          ) {
            const _childIds = []
            item._leaf = false
            getterIds(item.children, _childIds)
            item._childIds = _childIds
            item._idsIncludeSelf = [item[key], ...item._childIds]
            
            // 记录options，根据节点的value值
            this.$set(this.optionsMap, item[key], item.children)

            loop(item.children, item)
          }

          if(item.parentId === '-1') {
            this.rootList.push(item)
          }
          this.$set(this.industryDataMapping, item[key], item)
        })
      }
      loop(result)
    }

 续集...

在后续项目中发现在递归中使用浅拷贝，会导致遍历超栈报错，从而优化该段代码不使用递归，改为迭代的方式模拟栈，代码如下：

    handlerIndustryResult(result, key = 'name') {
      if(!Array.isArray(result)) return;
    
      const stack = [...result]; // 使用栈模拟递归
      const getterIds = (list, res = []) => {
        list.forEach(i => {
          if (i.children) {
            getterIds(i.children, res);
          }
          res.push(i[key]);
        });
      };
    
      while (stack.length > 0) {
        const item = stack.pop(); // 每次从栈中取出一个节点处理
        item._leaf = true;
        item.label = item.name;
        item.value = item[key];
        item._parentNode = item._parentNode || null;
    
        if (item.children && Array.isArray(item.children) && item.children.length > 0) {
          const _childIds = [];
          item._leaf = false;
          getterIds(item.children, _childIds);
          item._childIds = _childIds;
          item._idsIncludeSelf = [item[key], ...item._childIds];
    
          this.$set(this.optionsMap, item[key], item.children);
    
          stack.push(...item.children); // 将子节点加入栈中继续处理
        }
    
        if (item.parentId === '-1') {
          this.rootList.push(item);
        }
        this.$set(this.industryDataMapping, item[key], item);
      }
    }