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

8个月前更新

150

前言：在项目中发现一个奇怪的问题，一个请求在数据量少的时候非常快速，数据量多的时候非常慢，甚至导致浏览器崩溃，在浏览器的网络抓包中看到有返回状态时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)
    }