哪些技术可用于客户端交互式数据网格（如 UI）？答案

【问题标题】：What technologies are available for client side interactive data grid like UIs?哪些技术可用于客户端交互式数据网格（如 UI）？
【发布时间】：2011-12-17 08:17:15
【问题描述】：

我目前正在开发一个项目，我们使用 HTML、CSS 和 JavaScript（自定义以及 JQuery）开发了非常交互式的数据网格控件。这在高端客户端机器上似乎一切正常，但我们的客户抱怨浏览器需要很长时间才能呈现接收到的数据。

我们注意到，在具有 3 Gig RAM 和一个 3 GHz 处理器的 win2k3 服务器上运行的几乎所有主流浏览器中，通常一个页面在 1-2 秒内加载和呈现，但我们的客户的计算时间长达 25 秒。

我的问题基本上是，如果我们想使用其他技术来加速具有此类交互式数据网格的页面呈现，用户可以动态选择数据表中的可用列并可以通过客户端，那么有哪些可用选项事件（javascript 调用）到同一页面上的其他 Flash 内容。提前致谢。

【问题讨论】：

速度慢是因为数据太多（连接慢）还是逻辑太多（电脑慢）？
@SLaks render the received data，所以我假设 b.
@SLaks 是的，它似乎是 javascript 逻辑。主要是一个 for 循环，它使用 jQuery 选择器为属性隐藏几列，即 for (c in columns) { var selectorClass = "selector_" + columns[c]; $("[colClass='class_header_" + columns[c] + "']").hide(); $("[colClass='class_data_" + columns[c] + "']").hide();让我知道在不使用任何其他第三方浏览器插件的情况下，使用任何其他比 javascript 更快的技术是否可以实现这样的事情。
您可以优化您的 Javascript 并使其更快。例如，您解析该复杂选择器的次数过多。

标签： jquery css browser datagrid

【解决方案1】：

jqGrid 是我的首选。开发人员花了很多时间针对庞大的数据集对其进行优化。

【讨论】：

【解决方案2】：

我为此使用DataTables，但我不得不承认，大部分性能优势在于将繁重的任务（排序、过滤）委托给服务器端，服务器端有一个 MySQL 数据库来处理数据。客户端一次只能接收 X 条记录（200 条或更少），这对于大多数机器来说是微不足道的。

话虽如此，我不确定它在页面中有数千条记录时的性能如何，但根据他们网站上的论坛帖子，它似乎可以处理至少数百条记录而不会眨眼。

我想这会引发另一个问题：您是否在客户端拥有完整的数据集并在客户端对其执行排序/过滤？无论有没有 DataTables，您都可能希望服务器完成繁重的工作。使用现有插件或使用您自己的自定义代码，利用 Ajax 和数据交换格式（JSON 是一个明显的选择）将有助于实现这一点。

尚未准备好迎接黄金时段，但值得关注 jQuery UI Grid。团队近期博文：http://blog.jqueryui.com/2011/10/state-of-the-jquery-ui-grid/

【讨论】：

感谢您的回复格雷格。事实上，这些动态数据网格仅显示（并且需要显示）几行 5-12 和 40-45 列。所有列都由服务器加载到表中，然后使用 JavaScript 我们将大部分列隐藏在客户端，只显示一些最相关的列。在慢速机器上渲染期间，这种隐藏活动似乎花费了大部分时间。
那是极少量的数据！我什至无法猜测可能存在什么（如果有的话）效率低下，但 25 秒的处理时间让我感到震惊，即使在旧机器上也是如此。祝您测试其他选项好运；也许 DataTables 的 jqGrid 将提供您所需要的！
@SalmanQ，尝试使用原生 css 来显示/隐藏不相关的条目（例如，通过添加 css 类），它应该会大大加快速度。还尝试将显示/隐藏过程与浏览器的动画帧同步（例如通过使用 requestAnimationFrame 或类似的东西）