我正在使用React.js仅使用<div>而不是<table>在Web浏览器中构建一个类似于Excel的表。
列数约为90，行数约为24000。
我们知道，由于性能问题，不可能在单个网页上将整个数据加载到HTML中。 因此，我决定使用滚动向用户显示部分数据。
主要概念很简单，在用户的视口附近构建HTML。 猜测用户是否在单个视口中看到第1800至1900个数据。我只会将大约1750〜1950年的数据加载到HTML中。如果用户向上滚动，我将为第1700〜1750个数据加载HTML，并删除第1900〜1950个数据。
我认为我需要手动操作滚动偏移量才能获得用户所在的位置。如果每行的高度等于40像素，并且视口的高度为1000像素，那么用户将在单个视口中看到25个项目，因此我需要加载约25（前）+ 25（当前正在查看）+ 25（结束）数据，如果用户无论是向上还是向下，我都会加载其他数据，并删除远离用户的数据。
但是，我发现对我的表的要求与这种情况不匹配。这是我的情况。
首先，每一行的高度都不相同。基本上，我的表格会将一行显示为一行。我的意思是，表单行可以如下所示，
| Photo| ProductName | Size Pool | Stock |
.... // Below are single row
+------+---------------+-------------------+------------+
| | Boots | 110-120 | 24 | // Row header (Shows Summary of child row)
+ +---------------+-------------------+------------+
| | Boots | 110 | 16 | // Row's row #1
+ +---------------+-------------------+------------+
| | Boots | 120 | 8 | // Row's row #2
+------+------------------------------------------------+
...
+------+---------------+-------------------+------------+
| |Leather Shoe | 120 | 8 | // Row can come with no header row,only single
+------+---------------+-------------------+------------+
...
与上面类似，如果产品具有两个以上的选项，则它将合并为单行的行并显示摘要标题。如果不是选件产品，则仅显示其行。如果行内的内容很大，它将延伸以适合其中的内容 所有数据均来自远程数据库，该数据库通过REST API检索数据。
数据库方案如下，以2表为例。
Table #1 ProductInfo
+--------------+------------+------------+-----------+
| GroupNumber |ProductName | Size | Stock |
+--------------+------------+------------+-----------+
| 1 | Boots | 110 | 16 |
+--------------+------------+------------+-----------+
| 1 | Boots | 120 | 8 |
+--------------+------------+------------+-----------+
| 2 |Leather Shoe| 120 | 8 |
+--------------+------------+------------+-----------+
Table #2 GroupInfo
+-----------+------------+--------------+
|GroupNumber| SizePool | ImageURL |
+-----------+------------+--------------+
| 1 | 110-120 | https://abc |
+-----------+------------+--------------+
| 2 | 120 | https://def |
+-----------+------------+--------------+
将来的要求在下面，（其中大多数已实现）
-
按每列排序，多行按行或行（通过SQL处理）排序
-
按表达式过滤数据（由客户端处理）
-
隐藏，调整大小，更改列的顺序（由客户处理）
-
单元内部的可交互组件，如DatePicker，弹出窗口等（由客户端处理）
我成功地使用基于页面的方法创建了这样的表。但是我需要滚动视口表。 该表包含许多因数值列，例如总和，平均值，除非有特殊原因（例如性能），否则它们不存储在数据库中。 （它们中的大多数由DB View或Procedure处理，包括排序，计算等）。因此，总体性能非常重要。
我考虑了一些问题和解决方法，您可以检查一下并给我建议吗？
Q1。如何确定何时应加载和删除数据及其数量？
- 数据高度不一致，所以我认为我不能使用滚动偏移量或数据编号作为测量标准。 （可以通过可预见的方式吗？）
- 是否可以通过访问DOM元素进行存档？我是Web开发人员的新手。抱歉。
Q2。我可以通过两种不同的方式从数据库获取数据。
- 分别获取
[<ProductInfo>,...]和[<GroupInfo>,...]的ProductInfo和GroupInfo - 将单个对象归为
{ group:<GroupINfo>,values:[<ProductInfo>,...] }在典型情况下，这种情况下哪种性能更好？
Q3。如果我收到类似{ group:<GroupINfo>,...] }的数据，性能是否存在问题？
- 像查询开销一样（我需要使用连接6次查询，最多6个深度嵌套的SELECT查询，并带有30个计算列以进行一次数据检索尝试。-因为我有很多用户要使用，所以预先计算的视图或表可能会出现问题并经常更新。因此，我至少在更新时需要担心互斥。
- 如果我得到
[<ProductInfo>,...]之类的数据，我确信以上查询的性能足以进行裁剪。但是我认为以后一个更好。所以如果可能的话，我需要更改界面。
Q4。如果我从数据库中裁剪整个数据并在开始时进行结构化，然后仅为DOM加载和删除数据，这是一个好方法吗？
- 当然，第一季度是我的首要任务，但这似乎很好，除了与数据库同步数据外（因为其他用户可以在客户端包含过时的数据时更新值）
我考虑过使用无限滚动，但这不是我的情况，我需要同时执行加载数据和删除数据。但是无限滚动似乎不支持从视口中删除数据。行高不一致也可能是一个问题。