js forEach 循环优化代码

      resDto.data.forEach((resc) => {
           // 循环当前答案 找到对应的文件  设置答案
        let comps = this.$refs[`spreadCom${resc.manuscriptIdentify}`]
                if (comps && comps[0]) {
                     comps[0].setCurExalVal({
                    rowNo: resc.rowNo,
                    colNo: resc.colNo,
                   sheetName: resc.sheetName,
                   value: resc.value
              })
          }
   })

这段代码如何优化, 后台返回的 resDto.data 数据量很大大概1500条,在前端在渲染数据的时候会造成卡死前端页面,有什么优化的方法吗?

那只能分页处理了。指展示 100条。点击更多或者滑倒底部加载下100条

你这个情况不是forEach循环卡顿,循环1500次浏览器最多也不过是1秒钟的事情,你的问题在于每条数据都需要在页面上进行渲染,导致卡顿的是页面渲染过多的dom节点,页面卡死

解决办法如下:
1.主要看你是用什么展示数据的,如果是列表,滚动展示,可以考虑使用"虚拟滚动"来解决页面卡顿,至于怎么写虚拟滚动,你在网上百度一大堆的
2:如果你是table表格展示数据,建议使用分页展示,分页后端做很简单的,建议和后端沟通一下.

还有就是虽然前端能通过一些技术方式处理数据量较大的数据,但是这不是最好的解决办法,前端受限于单线程,大量的数据处理不应该放到前端来做的,而且数据量过大,请求时间也会很久,用户体验极差的,应该是分段请求加载,一次性只请求一部分数据,加载一部分数据,分多次请求加载才是最科学的解决办法的

渲染 1500 条数据不可能是卡死的原因，就算后台返回1万条。js处理也是轻轻松松的
关键应该在于之后的代码，操作 dom 是很慢，但是1500个我感觉也还行啊，应该是你的代码哪里写得有问题
比如用了 offset 之类的属性什么的

关于该问题，我找了一篇非常好的博客，你可以看看是否有帮助，链接：js forEach之双重循环遍历

js forEach 循环 优化代码

js forEach 循环优化代码