什么是客户端 - 服务器交互的最佳实践？

Question

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

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

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

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

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

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

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

• 我可以做些什么来减轻客户端处理时间问题，而不会将太多处理移到服务器上，最终导致数据传输时间问题？
• 在平衡客户端处理与服务器端处理方面有哪些最佳实践？
• 在服务器端或客户端犯错是否更好？
• 我可以使用哪些工具来更好地优化这些交换，以便不会出现问题？

Answer 1

您在客户端处理的内容有多长？处理JSON对象（即使是非常大的对象）也不应该过于密集。

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

你应该使用AJAX＆amp;客户端功能以增强用户体验的方式。按用户请求加载和处理数据。只加载他们要求的内容即可减少服务器上的负载。客户。

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

Answer 2

事实证明，客户端的JavaScript引擎问题比我正在使用的数据更多。我花了很多时间对流程进行基准测试并对各种操作进行计时。

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

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

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

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

当浏览器首次发送XHR请求时，
• populate将触发
• addData在请求返回后和解析JSON对象之前触发
• addCellProp在初始解析数据后触发并遍历表中的每个单元格
• done当一切都被finsihed时会被激发

处理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 |

最昂贵的操作是在addCellProp和done之间。我已经完成了使代码尽可能高效的代码，但是当您运行数据集的多次迭代时，尤其是在操作DOM时，您只能做很多事情。

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

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

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

Answer 3

如果不对服务器进行如此多的处理而导致数据传输时间问题，我可以采取哪些措施来缓解客户端处理时间问题？

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

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

尽可能保持客户端轻便

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

是服务器有更多的力量

我可以使用哪些工具来更好地优化这些交换，以便不会出现问题？

IE开发人员工具使用网络标签查看线路上的内容