vue 渲染大量数据 性能问题

Question

现在需求是 页面上要显示上万条的文本数据，放到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/...

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

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

Answer 1

为什么不分页...

Answer 2

用Object.freeze来创建data数据。可以取消双向绑定来优化渲染。

Answer 3

赞同分页，不要一次渲染

Answer 4

去年再 腾讯 alloyteam分享会上听到一个思路,他们做兴趣部落的无线滚动是这样做的:
兴趣部落的数据量远不止4000条，但是用户一眼看过去,能接受不超过20条，加上滚动的冗余。大概就是保持 一个ul里面只有40个li。通过CSS transition 进行定位
当向下滚动的时候 不断把滚动到屏幕上方，已经看不到的节点 修改内容 & 样式 移到最下方，作为新节点展示出来。
向上滚动的时候就不断把滚动到屏幕下方，已经看不到的节点 修改内容 & 样式 移到最上方，作为新节点展示出来。
这样来来回回 浏览器处理的只有这40个li。相比于处理4000个li 轻松很多。
iscroll插件的无线滚动效果也是这个也是这个思路。

Answer 5

https://juejin.im/post/5b5184...

Answer 6

https://github.com/Akryum/vue...

https://github.com/tangbc/vue...

Answer 7

https://codepen.io/liuhuaxia/... 以前帮朋友写的

Answer 8

三个大括号，有这么渲染的？