Vue渲染数据量过大，页面渲染卡

方案：

减少数据，减少demo节点，虚拟列表

我在处理的使用使用了两个方案，一个是减少demo节点（组件化）拆分；虚拟列表

我在进行排查问题的时候发现问题的所在是因为页面html有1800多行而且数据量过大，导致前端渲染页面的时候过卡，页面中的控件也比较多还做了双向绑定。最大的问题是需求中必须是可编辑，并且要支持联动编辑。那么既然这样的话更不用说了，一个都卡的不行不行的，联动肯定就炸了。

解决思路：

最开始与同事商量准备将所有可编辑的部分改为静态，然后再数据后边添加一个修改的字眼，点击的时候动态生成一个控件元素，这样的话就不会有那么多控件绑定了。确实是个好思路，但是回过头来一看结构过于复杂，整个人又懵了

最后还是通过拆分，不停的拆分，提升了很大的优化，但是此时还有一个问题就是数组多了还是会卡，那么我又进行了一个虚拟列表操作，这里我采用了vue-virtual-scroll-list，配合了我的组件拆分，控制横向滚动的数量。

安装：

1. 安装 vue-virtual-scroll-list

npm install vue-virtual-scroll-list --save

2. 引入下载好的组件记得局部注册一下组件

import virtualList from 'vue-virtual-scroll-list'

最后的最后差不多就是这样了。

初来乍到，请多关照，高手勿喷

Vue渲染数据量过大，页面渲染卡相关推荐

bootstrap 树形表格渲染慢_bootstrap-table-treegrid数据量较大时渲染太久了
bootstrap-table-treegrid数据量较大时渲染太久了森姐姐 2019-10-23 16:48:51 2260 收藏 2 分类专栏: 遇到的问题最后发布:2019-10-23 16 ...
vue+cesium cesium数据量太大导致浏览器卡顿解决办法
vue+cesium cesium数据量太大导致浏览器卡顿解决办法解决方案 : 不要把任何的cesium对象放在data中监听,因为在data中的变量 , vue会劫持数据 , 导致迟缓. 解 ...
vue+cesium cesium数据量太大导致浏览器卡顿解决办法
如题博主在开发过程中遇到了问题就是当数据量过大时浏览器特别卡情景: 每秒实时渲染数据效果:当前数据没有渲染完就开始渲染下一秒的数据了如何将巨大的数据在一秒内快速渲染到页面上呢? 解决方案 ...
vue el-select数据量太大，导致浏览器崩溃解决办法
下拉数据量太大,浏览器单线程渲染时间较长,会导致浏览器崩溃.为了解决这一问题,可以采用懒加载形式,完美解决 <el-col :span="24"><el-form ...
js中websocket基本使用及数据量过大或推送频率过快等基本问题
WebSocket的定义 WebSocket是html5提供的一种在单个TCP连接上进行双向通信的协议,解决了客户端和服务端之间的实时通信问题.浏览器和服务器只需完成一次握手,两者之间就可以创建一个持 ...
Matlab曲线图导出eps数据量太大占用很多存储空间
Matlab曲线图导出eps数据量太大占用很多存储空间我的Figure是从simulink里的scope里导出的,因为是采样率很高的时域波形,所以数据量很大.从Figure里导出eps向量格式的话, ...
api文档数据量太大崩溃_Tableau的API操作（一）-取消任务刷新
为啥需要取消数据刷新?公司Tableau使用的数据是发布到server上的.依托服务器强悍的性能,所有的报表.分析指标的交互都能做到快速响应.但是最近出现了一个问题,数据量过大导致刷新时间很长(6亿左 ...
sqllite查询数据量_Sqlite大数据量查询优化比较
标题写的有些大了-- 我做的一个Web网站用的是Sqlite数据库,昨天某网站采集了4039篇文章,发现页面打开速度慢的要死,看了一下耗时,发现sqlite在数据量比较大(4000算大?--我觉得挺大 ...
数据量过大时数据库操作的处理
一些大规模的系统,如人口系统的数据甚至超过了1000万条,可谓海量.那么,如何实现快速地从这些超大容量的数据库中提取数据(查询).分析.统计以及提取数据后进行数据分页已成为各地系统管理员和数据库管理 ...

Vue渲染数据量过大，页面渲染卡

Vue渲染数据量过大，页面渲染卡相关推荐

最新文章

热门文章