⼤数据量表格加载慢的问题解决⽅案
1. 索引
这篇博客主要是为了总结⽬前表格加载数据的⼏种⽅案以及遇到的问题和解决⽅法，并不是⼀个实际的代码实现⽂。博客思路⼤概是先介绍下⽬前SiCAP项⽬中表格的⼏种数据加载⽅案，以及遇到的问题和解决⽅法。
由于⽬前表格实现技术是通过vue+elementUI实现的，所以以上解决⽅法都是通过vue+js+elementUI实现的，不过思路适⽤于其他技术。
总共有以下⼏种⽅案：
⼀个页⾯加载所有数据
假分页加载数据（滚动加载数据）
⽆限分页加载数据
真分页加载数据（滚动加载数据）
模拟滚动实现加载数据
2. ⼀个页⾯加载所有数据
这个其实就是elementUI⾃带的table表格功能，⼀个页⾯加载所有数据。
这种⽅案优点就是⾮常简单啊，直接调⽤接⼝获取到数据，然后传⼊所有数据，最后⼀⾏⼀⾏全部渲染出来。
但是缺点同样明显，⾸先要通过后台获取数据，如果数据⾮常多，那么数据越多接⼝返回速度就越慢，你就只能看着加载圈圈⼀直在转啊转。数据返回后还得渲染到页⾯上，数据量⼩你可能感觉不到什么，但是数据⼀旦⼀多⽐如⼀次渲染100条、1000条以上的数据，那么页⾯就会卡住直到数据渲染到页⾯上。所以这时就要有新的解决⽅法了。
3. 假分页显⽰数据（滚动加载数据）
因为后台接⼝返回数据并不是很慢，但是表格渲染造成页⾯⾮常卡。所以这时就需要想⼀种⽅法让数据⼀次不全部渲染完，⽽是分批渲染。⼀次只渲染⼀部分数据，前⼀次数据渲染完后再渲染新的数据。
这⾥有两种⽅案实现。⼀种就是利⽤elementUI中的分页器和表格实现，每次只加载当前页⾯的数据。⽐如有1000条数据，每页显⽰100条数据，就会分为10页，第⼀页显⽰0-100区间的数据，第⼆页显⽰100-200区间的数据，以此类推。通过点击不同页实现数据的截取。另外⼀种就是不需要分页器，还是在⼀页显⽰，只不过⾸次只加载⼀部分数据，当⿏标滚动到列表底部的时候再加载其他部分数据，实现思路和假分页其实⼀样，只不过展⽰不同，这种情况适⽤于⼿机上列表加载上。
这两种⽅案优点是优化了假数据的渲染速度。
缺点还是没解决后台接⼝返回数据慢的问题。⽽且就算分页，⼀页展⽰的数据量还是很多、表格复杂的时候还是卡顿。你可能会说⼀页展⽰尽可能少的数据，但是如果实际情况是最少展⽰100条数据，这种⽅法就不⾏。
4. ⽆限分页加载数据
由于数据库中数据量增加的⾮常快，浏览表格时就不能确定总数，否则确定总数后分页器总页数也就固定了。就会造成最后⼀页的数据有可能显⽰的不是最新的。⽐如⽇志记录统计，这个变化⾮常快，⼀会就增加⼏⼗条。由于滚动加载的⽅式可以不⽤知道总数，就可以使⽤滚动加载的⽅式。不过PC端⼀般都是分页的，所以分页要解决这个问题就必须不确定总数，⼀直有下⼀页，可以点击请求后台接⼝，直到获取没有数据为⽌。
所以就有了⽆限分页。实现⽅式是基于假分页上的。它的思路是先显⽰前6页的数据，不展⽰总页数。当点击第6页时再次调⽤接⼝返回7-13页数据，以此类推，如果返回的数据量不⾜6*每页数量则表⽰⽬前所有数据已返回了。
这种⽅案优点是可以在不知道总条数的情况下获取实时部分数据。因为多次请求接⼝，接⼝数据返回速度提升。适⽤于数据量⼤、数据增加速度快的场景。
缺点是不常⽤，不好确定数据总数，场景固定。
5. 真分页加载数据（滚动加载数据）
由于接⼝数据返回速度慢，导致表格加载变慢。前⾯⽆限分页已经优化了这个问题，但是⽆限分页不适⽤于⼀般的场景。要解决这个问题就必须多次调⽤接⼝返回部分数据，⽽不是⼀次返回所有数据。
有两种⽅案解决，⼀种是真分页，实现⽅式是基于假分页上的，只不过假分页是在所有数据上截取，⽽真分页是调⽤接⼝实现的。⽽且还得改动⼀些勾选全选逻辑，利⽤缓存记录不同页的勾选情况。它的思路是每次点击分页就给后台发送带当前页参数的请求，请求当前页的数据。另⼀种就是不需要分页器，还是在⼀页显⽰，当⿏标滚动到列表底部的时候再请求其他部分数据，实现思路和真分页其实⼀样，只不过展⽰不同，这种情况适⽤于⼿机上列表加载上。
优点是接⼝调⽤速度提升到最优了。
缺点是⼀页渲染的数据还是很多、表格复杂的时候还是卡顿。⽽且代码实现批量操作不同页数据的情况⽐较复杂。
6. 模拟滚动实现加载数据
这种情况和后台接⼝返回速度没关系，只是为了解决单页⾯数据量⼤时的渲染问题。由于某些特定情况导致表格结构复杂、浏览器版本低，导致真分页情况下单页100条数据渲染都消耗很长时间。所以必须想⼀种⽅法解决单页可以渲染⼤量数据⽽不影响性能。
因为电脑显⽰屏就那么⼤，加载表格时你能直观看见的也就最多20条数据左右。所以为什么不可以只渲染20条数据左右，然后⿏标滚动就更新当前数据，DOM数量也就不会增加。就算你有百万条数据，你能直观看见的只能是20条数据左右，你只能通过总条数、滚动条来判断总数。总条数可以通过数据的数量来得到，所以只需要模拟滚动条位置就⾏了。滚动条⼀滚动就根据滚动条位置拿到能看见的数据。其实就是通过欺骗⽤户视觉来达到⽬的。
你现在有100条数据需要显⽰在表格中，你直观只能看见20条数据左右，所以你只需要固定表格⾼度、每⾏⾼度就可以知道20⾏数据的⾼度，以及其余80条数据的总⾼度。所以现在加载100条数据的
表格可以变成顶部空的只有⾼度的div和中部你看见的20条数据和底部空的只有⾼度的div的组合。滚动条向下滚动的时候增加顶部div的⾼度，减少底部div的⾼度，改变中部显⽰的数据。这样就实现了模拟滚动的功能。
优点是优化了表格渲染的性能。可以和假分页真分页⼀起使⽤。可以摆脱复杂的分页实现⽅式，只⽤单页渲染不卡顿。
缺点是实现起来⽐较复杂。
7. 总结jquery滚动条滚动到底部
⽅式优点缺点适⽤⽅向
⼀个页⾯加载所有数据实现、⽤起来都⾮常简单1. 数据多就会造成接⼝数据返回变慢。
2. 页⾯渲染卡顿
1. 表格结构简单
2. 数据少量
假分页显⽰数据（滚动加载数
据）相⽐全部渲染，渲染速度提升了很
多
1. 数据多就会造成接⼝数据返回变慢。
2. 页⾯渲染有可能还是卡顿
1. 滚动适⽤于⼿机端。
2. 表格结构简单，每页⾏尽可能地
少
⽆限分页加载数据1. 可以实时显⽰数据。
2. 数据返回速度提升
1. 场景少不常⽤。
2. 不好确定数据总数。
3. 代码不好实现
适⽤于数据增加速度快的情况
真分页加载数据（滚动加载数
据）数据返回速度提升到最优
1. 页⾯渲染有可能还是卡顿。
2. 代码实现其他逻辑难，⽐如记录不同页的
勾选
1. 滚动适⽤于⼿机端。
2. 表格结构简单，每页⾏尽可能地
少
模拟滚动实现加载数据优化了浏览器渲染列表性能  1. 代码实现起来⽐较复杂。1. 可以在假分页、真分页中使⽤。
2. 可以单页实现⼤数据渲染

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。