vue 页面卡顿如何优化？

[zarte]

v-for 方式生成 5 百多个 table （非组件），每个一百条数据以内字段不固定。之前发帖问了已正确设置唯一 key 。数据为动态 push 到数组渲染的。 页面任何操作输入文字，点击按钮啥的都卡。。。

[seki]

1.分页
1.滚动加载
1.虚拟渲染，例如 https://github.com/Akryum/vue-virtual-scroller

[seki]

也可以检查一下你的代码，是不是你输入一下文字和点击一下按钮就会弄得整个页面都重新渲染了，适当地抽象化组件实现部分重渲染说不定也能解决问题

[meathill]

500 多个 table，每个 100 条数据，怎么都会卡……

方案：

1. 不要用 table，用 grid + 限制列宽
2. 动态加载，保证同时只有少数几个表格在渲染

[sixway]

可以打开调试工具那里渲染花费了。
chrome 的 Performance

[murmur]

页面发出来看看，这东西不给代码怎么回答你？

[jydeng]

虚拟滚动

[zarte]

@meathill 嗯，我试下

[redbuck]

$('*').length 看下有多少 dom
dom 多可以懒加载.

table 加个 v-if,容器加个最小高度,再监听滚动事件(节流),进入视口的解除 v-if,离开的恢复 v-if.最好封装成指令.
数据量太大,又不用变化的,Object.freeze.