在物化表呈现问题中显示超过20000行[关闭]

Question

关闭。这个问题需要更多focused。它当前不接受答案。

---

是否要改善此问题？更新问题，使其仅按editing this post专注于一个问题。

[<7天前关闭。

我想显示数据库中表中的数据。我的表有2万多行，并且还会添加更多行。加载和渲染需要20秒钟以上。我使用了一种解决方案，其中首先将表的可见性设置为none，然后在ready函数中使其再次可见。我该如何减少更多时间？谁能提出更好的解决方案？提前感谢。

Answer 1

我们可以将性能问题分为三部分：

查询执行时间
1. 数据请求的下载时间
2. 前端中元素的解析和渲染

对于1.，它取决于查询-如果您仅执行SELECT *，则查询执行时间不会有任何性能提高，但是，即使您从实例化表中提取子集，也应该考虑添加一个索引，其中包含您要选择的属性

对于2。您可以在服务器应用程序层中使用gzip或brotli将数据服务器端压缩后，再通过网络将其发送到网络上，从而获得很大的好处。您的php / python /任何代码。但是正如Knouralp Toksoy的评论所言，分页可能首先是合适的，因为很少有用例可以一次将2万行加载到前端。例如。编写您的api以接受页面变量，例如/ data？page = 2，然后将其映射到例如SELECT * FROM ... LIMIT 10,20。然后，当您向下浏览页面以逐步加载更多行时，您调用data？page = {x}。

对于3.，您应该首先查看2.的分页，因为这将消除对前端拥有大量数据的需求。但是，如果您发现下载速度不是问题，并且一次可以很好地加载所有下载速度，则确实有可用的选项。如果您使用的是框架，请为您选择的框架使用React Virtualised或类似的库。基本上，这只是渲染-添加实际的dom节点-仅用于当前需要显示的数据子集。该库将处理滚动侦听器的复杂性，并更新要显示的数据子集。如果没有框架，您可以考虑使用Intersection Observer api，并在用户向下滚动足以需要它们时手动添加下一个10-50行。