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