老师,我最近在做一个功能,需求大致是这样的
1.后端同事返回给我一整个数据表的字段,不分页,可能有上百条记录。
2.数据格式如下图,除了fieldCode字段名之外,其他字段用户都可以进行编辑。
于是,页面就变成了这样,字段的取值包含了单选、多选、级联、switch还有input
接下来给老师诉说一下我的的优化之路
1.最开始是直接全部渲染出来,这个时候性能问题非常明显,比如说点选一个checkbox,select点击选中一个选项,都要经过几秒钟的事件页面才会响应结果。
我通过观察performance,主要的时间是花在了scriping上,加上自己调试,基本上得出结论是element的table的渲染问题。
2.第二次我选择了通过下拉渲染的策略,但是问题又出现了,起初用户没有向下滑动,table的数据可能只有十几条,性能方面不存在明显问题,但是到滚动条滑动到底部,数据全部都渲染完了,问题就又出现了。
3.第三次我选择了通过proxy来代理整个list,从而实现一个虚拟分页,性能有了很大的改观,但是其实反应慢半拍可以察觉的出来的。
请问老师,这个问题我应该怎样解决呀。
我们的table组件是在element的基础上扩展的,代码基本一致
我自己通过文章(https://juejin.cn/post/7007252464726458399)进行了优化
主要模仿了他的更新渲染优化,但是性能提升看不太出来
接下来他的v-memo缓存策略的话,他是判断某一个row是否选中改变,但是我的row基本上每个字段都可能改变,不可能一个个去比对,所以这个策略应该不适合我当前的业务场景。
所以老师,还有什么办法呀