大数据渲染问题答案

【问题标题】：Large data rendering issue大数据渲染问题
【发布时间】：2012-07-01 09:16:16
【问题描述】：

在视图中呈现大数据的最佳方式是什么？有什么方法可以分部分渲染吗？

Controller 的动作产生大数据集（1000x1000 矩阵）并将其返回给 View。当我渲染它时，浏览器挂起。数据是由其他服务生成的，我无法以较小的部分获得它。

矩阵是 INT 值的二维数组。

控制器代码：

public ActionResult GetData()
{
    var result = ThirdPartyService.GetData();

    return View(result);
}

查看代码：

<table>             
        <% foreach (var x = 0; x < Model.Matrix.Count; x++) { %>
            <tr>
        <% foreach (var y = 0; y < Model.Matrix[x].Count; y++) { %>
            <td><% = Model.Matrix[x, y] %></td>
        <% } %>
        </tr>
    <% } %>
</table>

【问题讨论】：

用户应该如何处理所有这些数据？
如此庞大的数据集如何处理？这对用户查看 1000x1000 矩阵几乎没有用处。
另一方面，如果显示为每个数据点 1 个像素，它会给出非常适度大小的图像...
是统计数据
数据可视化是一个巨大的话题；我们将需要更多信息，例如什么样的数据，“大”的含义，您正在渲染的内容，“按部分”的含义，“控制器”是谁/什么，1000x1000 什么（单词？数字？像素？），你在说什么样的“视图”。展示你目前拥有的东西也会有所帮助。

标签： c# .net asp.net-mvc large-data

【解决方案1】：

您可以渲染一个空表并从服务器获取数据以使用 ajax 填充它。这样，您将下载布局和数据，而不是 <tr><td></td></tr> 内容。如果你做数学：

<tr></tr> 每行给你 9*1000 = 9000 字节
<td></td> 为每行中的每个单元格提供 9*1000*1000 = 9000000 字节
总计：9009000

您可以从请求中减少大约 9 mb，这已经很多了！

此外，您可以在服务器上打开 GZip，以便压缩数据。

【讨论】：

“你可以渲染一个空表”——我应该用 JavaScript 渲染它吗？
只需将 <table id="data"></table> 放入您的标记中，然后使用 ajax 填充它。
我应该在哪里存储中间结果？控制器的动作调用其他服务方法，返回这个大矩阵。把这个矩阵放在哪里更好，然后再向它发出 ajax 请求？
处理ajax请求的action会返回矩阵，所以你应该在那里执行service方法。

【解决方案2】：

我猜这个大小的矩阵并没有在页面上完整呈现，所以我的建议是在用户滚动时通过附加到滚动事件来动态操作 DOM。通过使用SlickGird 作为数据渲染组件，使用编写的自定义插件来处理超过 1k 个元素的自动完成下拉列表，这对我来说非常棒。浏览器在处理大型数据集方面没有问题（我已经测试了多达 400k 的 JS 对象），但是在尝试显示它们时它肯定会挂起。因此，只需渲染您的用户所在的屏幕部分。

【讨论】：

我应该在哪里保存矩阵？我应该将它保存到数据库或其他地方吗？
实际上它被渲染了，但是它花费了太多时间并且在此期间浏览器没有响应。我需要解决它
您可以考虑使用 IndexedDB 或 localStorage 保存客户端（搜索 W3C 或 MDN 以获取有关这些技术的参考）。什么是矩阵元素，是复杂的对象还是只是数值。如果是后者，您可以将其全部保存在内存中（如果我们使用 4B 存储数字，则可以将其全部保存在内存中（1000 x 1000 矩阵将不超过 4M + 开销），如果使用 8B 存储数字则为 8M，依此类推..）
它是在单个页面上整体呈现，还是用户必须滚动页面。实际的 GUI 表示形式如何？