vue渲染大量数据如何优化_vue 渲染大量数据 性能问题

现在需求是 页面上要显示上万条的文本数据,放到Log组件里面,最开始的做法是 在前台做数据处理,根据获取到得数组数据生成html 文本 (这里生成html文本很小,就一个span + 日志内容,但是数据量很大) 遍历每一个元素用handlerLog在前台处理 以

{ { { handlerLog(log) }}} 的方式 加载到Log 组件里面, 然后加载到主页面。

这样光是这个tab标签页内存直接飙升到1g+,卡得不能自理,甚至崩溃。

然后将生成html代码(也就是上面的handlerLog处理)的工作挪到了后台,返回给前台的是处理好的html代码 ,准确的说是一个字符串数组,数组元素就是类似于下面这种

<div><span style="color: red"> git pull rejected </span> </div>

然后我在vue里面 去遍历这个数组

<template v-for="log in logs" >

{ { {log}}}

</template>

由于数据量巨大,至少4000 行 + ,这样内存依旧飙到了500多m ,虽然现在不会崩溃 但是页面会渲染特别久。。。卡住至少5,6秒··请问有什么解决办法。。

同事找了一个组件 https://github.com/vue-comps/…

我也去尝试了 ,但是感觉性能没有多少提升,而且还造成了样式混乱…..

你们有遇到过类似的问题吗?? 求助

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值