这是一个创建于 1606 天前的主题，其中的信息可能已经有所发展或是发生改变。
目前有业务需求是网页端展示一个很长的表，大概 3 百个表属性，内容比较多，用户打开这个也页面估计会卡慢。
请问通过什么解决方法可以让这种类型的网页打开比较流畅呢，有没有什么比较好的实践？
数据库操作涉及很多表，因为这些属性都是分开存储的，通过业务 ID 关联。
自己想到的方法可不可以参考瀑布流，做一个横向的瀑布流，用户往右拖动滚动条可以自动加载数据。问题是这种懒加载一般用于图片，用于表单、还是横向的可行性？
有没有比较好的方法用于很多属性的表展示呢，求教啊
 |
1
nobuger OP 前端使用的 VUE
|
|
2
nobuger OP 因为太小儿科了所以没人吗 =..=
|
 |
3
qiayue 2020-08-05 10:50:01 +08:00
根据实际需求来，这个页面是给谁看的，是否需要每次都看 300 列数据？
|
 |
4
wingtao 2020-08-05 10:52:50 +08:00
分页、懒加载、虚拟渲染都可以
|
 |
5
MrTreasure 2020-08-05 10:53:31 +08:00
不要一次性全部加在。前端做一个筛选，把要展示的属性筛选出来，表格只展示这些。
用户大概率不会一次看完 300 个属性，看的最多的是自己关注的，本地再做一个缓存，缓存上次选择的属性 |
 |
6
BreadKiller 2020-08-05 10:53:37 +08:00
可以只显示某几个关键列，然后最右边用详情按钮点开弹窗？
或者可以自定义表头，让用户选择需要查看的信息 |
 |
7
KuroNekoFan 2020-08-05 10:55:37 +08:00 via iPhone
我觉得滚动加载长表，尤其是桌面端，真的是个很脑残的产品设计，虽然也不是没办法解决你说的问题（虚拟表什么的，ui 框架应该都内置了）
|
 |
8
rabbbit 2020-08-05 10:56:51 +08:00
这个多没人会看, 留一些关键的其他的按类分页 /改成选项卡
|
|
9
rabbbit 2020-08-05 10:57:12 +08:00
这么多没人会看, 留一些关键的其他的按类分页 /改成选项卡
|
 |
11
en20 2020-08-05 11:02:13 +08:00
你说的是超大列表, 可视区渲染吧. vue-virtual-scroll-list 看一下应该是你需要的
|
 |
15
whypool 2020-08-05 11:07:46 +08:00
分类展示，sku 啥的
|
|
16
nobuger OP @KuroNekoFan 我说的是属性很多，是横向的滚动加载，也可以吗
|
 |
17
NotNil1 2020-08-05 11:08:50 +08:00  1
详细追业务关注哪些，根绝业务需求，给出多个透视图，多个页面
|
 |
19
wangxiaoaer 2020-08-05 11:19:20 +08:00
每个表格对应前端的一个表单，用户激活再渲染这个表单。页面首次进入只加入默认的关键表单。
|
 |
20
sunjourney 2020-08-05 11:35:06 +08:00
用户自己 set 要看的 key
|
 |
21
sillydaddy 2020-08-05 11:38:33 +08:00 via Android
@nobuger “不是很多条数据”，如果是这样的话，可以先测一下实际的性能表现吧？如果没问题那就不用改啦
|
|
22
qiayue 2020-08-05 11:47:32 +08:00
没有谁的肉眼能够一次性看完全 300 个属性，所以你的实现也不应该是一次把 300 个属性全部展示出来。
|
 |
23
redbuck 2020-08-05 11:48:36 +08:00
横向一样能搞懒加载,可以用 MutationObserver.
数据多的话,还是用虚拟卷轴之类的. 另外,如果数据不需要响应,记得 freeze 一下. |
 |
24
libook 2020-08-05 11:50:11 +08:00 1
你试试，是不是真的会卡慢，我觉得 300 个属性其实还好。
如果真的卡再考虑优化，比如数据一次性获取，但是 DOM 按需渲染，你的思路是可以试试的。 |
 |
25
TomatoYuyuko 2020-08-05 11:50:24 +08:00
设计有问题吧，让用户搜索下拉框选择显示哪些表头，再动态生成就行了，谁能一眼 300 列啊
|
 |
26
VictorJing94 2020-08-05 11:54:08 +08:00
冻结表头和列头
|
 |
27
IGJacklove 2020-08-05 12:00:15 +08:00
@nobuger 只加载关键数据,想要看全部数据单独做个详情页单独加载.总不可能加载一次他就看所有数据的所有属性吧,想看哪个的所有属性,单独加载哪个就可以了.
|
 |
28
xingyue 2020-08-05 12:17:22 +08:00 via Android
@libook 233333，我第一反应也是这个，这点性能可能浏览器还看不上～
不过展示设计肯定得再想想，300 列一起看不如不看。。。 |
 |
29
anguiao 2020-08-05 12:17:43 +08:00 via Android
我觉得应该是慢在数据库操作上，而不是前端渲染。前端渲染一个 300 列的表格，应该不是什么大问题。
想直接展示全部属性的话，感觉并不是很好优化。 |
 |
30
rodjerL 2020-08-05 12:27:31 +08:00 via iPhone
可以用虚拟滚动，react 有个库 react-window ,vue 不太清楚
|
 |
31
suzic 2020-08-05 13:08:04 +08:00 via Android
这些字段做成几个集合吧，前端搞成类似手风琴的折叠面板，每个面板展示一组集合
|
 |
32
loading 2020-08-05 13:11:30 +08:00 via Android
你这个是 ui 问题，让设计师画成图再说。
|
 |
33
jjianwen68 2020-08-05 13:17:24 +08:00 1
|
|
34
nobuger OP @jjianwen68 就是这样！谢谢
|
 |
36
xingyuc 2020-08-05 13:59:59 +08:00
倒个 excel 让他用手机 office 慢慢看 hhh，怎么可能这么多字段全都要看的
|
 |
37
shenyu1996 2020-08-05 14:25:23 +08:00 via Android
我有个问题 像这样的虚拟列表能解决浏览器 ctrl ＋ f 查找的问题么
|
 |
38
shyangs 2020-08-05 14:46:37 +08:00
起點小說《从零开始》 3000 章節, 點進目錄頁也沒覺得卡慢.
300 這個數量級對現代瀏覽器而言應該不會有性能問題. |
 |
39
raymanr 2020-08-05 17:38:07 +08:00
楼上说怎么可能都要看的得知道...
领导的心态是: 我可以不看, 但你不能不显示 |
|
40
qiayue 2020-08-05 17:44:14 +08:00
我们有个类似需求，需要表格横向显示 100 天数据，每天有 20 个列，所以总共最多 2000 列。
但是并不需要一次性显示完 2000 列，每次只需要显示自定义列即可。 |
 |
41
otakustay 2020-08-05 19:41:24 +08:00
横向懒加载对性能帮助很少，弄不好还可能倒拖性能
建议干脆导出 excel 给用户 |
 |
42
gzhhfj 2020-08-05 22:55:39 +08:00 via Android
tab 页分不行吗？打开的时候加载
|
 |
43
tairan2006 2020-08-06 09:51:03 +08:00
让用户自己选要看的属性……
|
 |
44
miniwade514 2020-08-06 10:18:11 +08:00
300 多列？用户要滚动到崩溃啊。感觉这是产品设计的问题，必须搭配搜索功能，搜到的列才展示出来。
|
Select Language