首页 > 其他分享 >递归深拷贝导致浏览器网络请求中看不到响应

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

时间:2024-10-09 14:10:58浏览次数:1  
标签:浏览器 递归 parentNode item key ._ 拷贝 children

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

 

标签:浏览器,递归,parentNode,item,key,._,拷贝,children
From: https://www.cnblogs.com/LylePark/p/18454111

相关文章

  • Day 7.5 数据类型总结 + 拷贝 浅拷贝 深拷贝
    目录一.数据类型总结二.浅拷贝和深拷贝(只针对可变类型一.数据类型总结存一个之还是多个值:一个值:整形,浮点型,字符串多个值:列表,元组,字典,集合有序or无序有序:字符串。列表,元组无序:字典,集合可变or不可变可变:列表,字典,集合不可变:整形,浮点型,字符串二.浅......
  • 递归中Return实例分析
    函数递归局部函数变量的特性自成体系,作为调用函数自身递归函数不依靠任何外部资源,自成体系的迭代到基准值return:返回特定的退出状态码,在函数结束时#!/bin/bash#usingrecursion#计算阶乘,formula:x!=x*(x-1)!,使用递归函数得到(x-1)!functionfactorial{#递......
  • 唯一客服浏览器插件:直播或客服平台自动回复插件
    支持平台:抖音巨量直播后台-抖音本地生活中控台-抖音直播间-微信小店客服-抖音小店飞鸽客服-快手小店直播中控台-淘宝直播中控台-视频号直播中控台-小红书直播中控台-tiktok直播页面-58微聊网页端-支付宝直播中控台-百度直播中控台 应用场景主流直播......
  • uniapp - HBuilderX运行到内置浏览器编译报错 ublic static TextAppearance_Holo_Smal
    前言网上的教程都无法解决问题,本文提供强力解决方案。在uniappH5网页开发中,报错提示:ublicstaticTextAppearance_Holo_Small:number;|SyntaxError:Unexpectedidentifier,非常恶心的错误,手机H5网站项目点击运行到内置浏览器后,瞬间报错且无法编译提示已停止运行,H5......
  • 算法【从递归入手二维动态规划】
    尝试函数有1个可变参数可以完全决定返回值,进而可以改出1维动态规划表的实现。同理,尝试函数有2个可变参数可以完全决定返回值,那么就可以改出2维动态规划的实现。一维、二维、三维甚至多维动态规划问题,大体过程都是:1.写出尝试递归。2.记忆化搜索(从顶到底的动态规划)。3.严......
  • 浏览器的渲染原理
    浏览器渲染原理五个渲染流程Parse阶段:解析HTMLStyle阶段:样式计算三个阶段:收集,划分和索引所有样式表中存在的样式规则访问每个元素并找到适用于该元素的所有规则,CSS引擎遍历DOM节点,进行选择器匹配,并且匹配的节点执行样式设置结合层叠规则和其他信息为节点生成最......
  • 在浏览器上访问媒体资源配置【文件上传】
    1.根urls.py文件中fromdjango.contribimportadminfromdjango.urlsimportpath,include,re_pathfromdjango.views.staticimportservefromdjango.confimportsettingsurlpatterns=[#path('admin/',admin.site.urls),path('api/shipp......
  • 浏览器事件处理机制:从硬件中断到事件驱动
    关键词:硬件中断,事件驱动,浏览器事件监听,操作系统抽象层,跨平台兼容性,事件冒泡与捕获摘要:本文深入探讨浏览器事件处理机制,从硬件中断到事件驱动模型,揭示了用户输入如何转化为页面响应。我们将了解操作系统的抽象层如何巧妙地连接硬件和应用程序,以及浏览器如何实现......
  • 浏览器事件处理机制:从硬件中断到事件驱动
    关键词:硬件中断,事件驱动,浏览器事件监听,操作系统抽象层,跨平台兼容性,事件冒泡与捕获摘要:本文深入探讨浏览器事件处理机制,从硬件中断到事件驱动模型,揭示了用户输入如何转化为页面响应。我们将了解操作系统的抽象层如何巧妙地连接硬件和应用程序,以及浏览器如何实现......
  • 浏览器事件处理机制:从硬件中断到事件驱动
    关键词:硬件中断,事件驱动,浏览器事件监听,操作系统抽象层,跨平台兼容性,事件冒泡与捕获摘要:本文深入探讨浏览器事件处理机制,从硬件中断到事件驱动模型,揭示了用户输入如何转化为页面响应。我们将了解操作系统的抽象层如何巧妙地连接硬件和应用程序,以及浏览器如何实现......