9

我正在建立一个工作网站，其中一个更重要的功能是显示数据的丰富内容网格。默认情况下，它每页只显示 20 个项目，但我们在数据库中有大约 200 个项目可以过滤、排序和搜索。

我们的销售和营销团队还要求提供“全部列出”功能，以便他们可以在一个地方显示所有数据并滚动浏览而不是翻阅数据。

弹性网格数据

整个系统在服务器端使用 ASP.Net MVC，在客户端使用 jQuery 和 Flexigrid 构建，并使用 JSON 通过 AJAX 在两者之间交换数据。

我已经得到了实际的数据传输部分非常可靠。包含 20 个结果的页面对整个请求需要 800 毫秒（通过 Flexigrid 向服务器发布请求并获取响应）。更多的是需要一段时间的客户端处理。

我可以将一些客户端处理卸载到服务器。但这会使服务器端操作花费更长的时间，并使返回的文档的大小变得更大。在高速互联网连接的情况下不是问题......但情况不一定如此。

我的另一个选择是下载尽可能多的数据并将大部分数据处理转移到客户端。这将请求时间减少到基本上为零（仅获取更改的元素而不是整个数据集）。它在具有快速 CPU 和大量 RAM 的机器上运行良好，但也不一定如此。

由于至少有一个人将此标记为“不是一个真正的问题”，让我澄清一下......

  • 我可以做些什么来缓解客户端处理时间问题，而不会将这么多的处理转移到服务器上，以至于我最终会遇到数据传输时间问题？
  • 在平衡客户端处理和服务器端处理方面有哪些最佳实践？
  • 是在服务器端犯错还是在客户端犯错更好？
  • 我可以使用哪些工具来更好地优化这些交换，以免事情继续出错？
4

3 回答 3

2

您在客户端处理什么需要这么长时间？处理 JSON 对象（即使是非常大的对象）不应该太密集。

在编写数据客户端时，大量的 DOM 查找可能会减慢速度。减少 DOM 查找可以极大地提高性能。我相信平衡服务器和客户端处理的良好做法是在服务器上出错。由于服务器在您的控制之下，您始终可以选择升级您的服务器。将大部分处理保留在服务器上也将使移动设备和旧计算机的工作变得更容易。

您应该以增强用户体验的方式利用 AJAX 和客户端功能。根据用户的要求加载和处理数据。通过仅加载他们请求的内容，您可以减少服务器和客户端的负载。

如果您还一遍又一遍地请求相同类型的数据，则可以查看服务器和客户端缓存。通过利用缓存，您可以减少请求时间和/或带宽。

于 2011-11-02T05:44:15.810 回答
1

事实证明，问题更多在于客户端的 JavaScript 引擎，而不是我正在使用的数据。我一天中的大部分时间都在对流程进行基准测试并为各种操作计时。

一切都在 Chrome 中快速运行。在 Firefox 中，一切都运行得非常快（认为不如 Chrome 快）。真正的性能落后者是 Internet Explorer。

当我加载整个数据集（所有 200 行）时，Flexigrid 会尝试对表中的每个单元格进行一些后处理。正如您在屏幕截图中看到的，每行有 29 个单元格......所以我们正在查看一堆格式化操作，总共 5800 次。

我能够将一些更昂贵的操作（即创建 jQuery 对象）从较低级别的单元循环中提取出来，因此它们每行只运行一次，但最终我仍然遇到与 IE 相关的性能问题。

为了给你一些真实世界的基准，我将代码设置为在它遇到某些事件之前吐出总时间：

  • populate当浏览器第一次发送 XHR 请求时触发
  • addData在请求返回后且在解析 JSON 对象之前触发
  • addCellProp在初始解析数据后触发并遍历表中的每个单元格
  • done当一切都完成时触发

处理 20 行数据（默认）：

------------------------------------------------------
| browser | populate | addData | addCellProp | done  |
------------------------------------------------------
| Chrome  | 0        | 84      | 123         | 286   |
| IE9     | 0        | 151     | 309         | 799   |
| IE8     | 0        | 226     | 481         | 1105  |

处理完整的数据集（本机 179 行）：

------------------------------------------------------
| browser | populate | addData | addCellProp | done  |
------------------------------------------------------
| Chrome  | 0        | 318     | 669         | 1963  |
| IE9     | 0        | 157     | 1813        | 9428  |
| IE8     | 0        | 229     | 2188        | 13335 |

最昂贵的操作是 betweenaddCellProp和done。我已经完成并尽可能地提高了代码的效率，但是当您运行数据集的多次迭代时，您可以做的只有这么多，尤其是在操作 DOM 时。

我已经修改了 Flexigrid（尽管有很多建议不要这样做）以尽可能少地接触 DOM，这实际上加快了速度。当我开始这项研究时，IE9 需要 20 到 30 秒才能触发done事件。

不幸的事实是，并非所有平台都是平等的，IE 似乎并不是以这种方式在显示中处理数据的最佳引擎。

更好的方法可能是在服务器端创建和操作 HTML 表，并在 IE 用户请求时将整个内容（标记和所有内容）发送到浏览器，而不是依赖 IE 从原始 JSON 对象创建标记。

于 2011-11-02T23:13:12.843 回答
0

我可以做些什么来缓解客户端处理时间问题，而不会将这么多的处理转移到服务器上，以至于我最终会遇到数据传输时间问题？

数据是否来自数据库？如果是这样，请限制那里的数据。这是db擅长的。我使用 flexigrid 并将所有分页排序和过滤保留在那里。db 仅返回按请求排序和过滤的所需数据。服务器所要做的就是返回它，而客户端所要做的就是渲染它。

在平衡客户端处理和服务器端处理方面有哪些最佳实践？

尽可能保持客户端光照

是在服务器端犯错还是在客户端犯错更好？

是的服务器有更多的权力

我可以使用哪些工具来更好地优化这些交换，以免事情继续出错？

IE 开发人员工具使用网络选项卡查看网络上的内容

于 2011-12-22T10:38:05.280 回答