在浏览器中显示 100 万行答案

【问题标题】：Showing 1 million rows in a browser在浏览器中显示 100 万行
【发布时间】：2012-11-29 12:44:09
【问题描述】：

我们的Utilty有一个单表，有1000万到5000万行，可能有一种情况我们需要在单页html客户端页面中显示5000万行，为了在浏览器中显示行我们使用jQuery在用户界面。

要检索行，我们使用 Hibernate 并使用 Spring for MVC。我正在寻找检索行并在 UI 中显示的最佳实践。我应该在 Hibernate 中检索大量数千行还是两千行并缓冲到 Web 客户端，还是有最佳实践？

【问题讨论】：

【解决方案1】：

最好的做法是不要这样做。它会爆炸浏览器内存和渲染引擎，并且会花费太多时间来加载。

向您的 web 应用添加一个搜索表单，让最终用户搜索他感兴趣的内容，并且只显示前 N 个搜索结果，就像 Google 所做的那样。

没有人能够在不进行搜索的情况下对 5000 万行做任何有意义的事情。

【讨论】：

【解决方案2】：

我认为您应该使用滚动分页（当用户几乎到达页面底部时会进行 ajax 调用并加载数据）。

例如快速谷歌example & demo

如果你的数据是表格的，那么你可以使用jQGrid

【讨论】：

【解决方案3】：

必须通过虚拟化来处理应用程序中的大量数据。虽然用户确实会被数百万条记录压得喘不过气来，但这并不是说他们不能用它做任何事情，也不是说如此大量的数据是深不可测的。

在实践中，根据您的操作，您会注意到这个限制会突然出现在您身上，只有数千条记录。坦率地说，这是非常少的数据。如果以数据为中心的应用要在浏览器中运行并表现良好，它们只需要完全不同的方法。

我们这样做的方式很简单，但并不是那么简单。

这有助于确定一个固定高度，因为您需要知道可滚动容器的最大高度。然后，您将在任何给定时刻可见的记录子集呈现到此容器中，并相应地定位它们（基于滚动事件）。有或多或少有效的方法来做到这一点。

最终目标保持不变。您基本上需要剔除屏幕上不直接可见的所有内容，这样浏览器就不会为应用程序响应而支付内存和布局逻辑成本。这是游戏开发中的常见做法，只有现在屏幕上可见的世界才会在任何特定时刻出现。所以这就是你需要做的让大量的东西表现良好。

在浏览器的上下文中，任何归因于内存使用和布局/渲染成本的东西如果不是绝对重要的话，都需要消失。

您还可以错开和涂抹重新计算，这样您就不会因每次小更新导致应用降级而产生任何费用。如果应用保持响应，用户可以等待 1 秒。

【讨论】：