1

我的应用程序中有一个文本框，允许用户在 UI 自动完成的帮助下选择一个位置。大约有10,000 个有效位置，用户必须从中选择一个。自动完成功能有两种实现：

  1. 首次加载页面时获取位置列表并遍历数组以在 javascript 中的每次击键上查找匹配项
  2. 每次击键时都发出 ajax 请求，因为在 MySQL（正在使用的数据库）中搜索要快得多？

性能方面，哪个更好？

初步测试表明，从性能的角度来看，一次加载数据是更好的方法。但是，此测试是在 JavaScipt 处理速度非常快的 MBP 上完成的。我不确定这种技术是否更适合低端安卓手机、旧系统等处理能力较低的机器。

4

2 回答 2

1

如果每次查询后端都没有优势，就不要这样做。

一直查询后端有什么好处？如果初始调用的返回数据量很大（带宽、准备它的 javascript 处理时间、时间），那么每次部分请求可能是更明智的选择。

于 2013-03-12T14:19:00.023 回答
1

您的问题围绕着哪个更快，在浏览器中处理超过 10,000 行，或者向远程服务器发送请求以返回较小的结果集。一个有趣的问题，它取决于运行时的上下文和环境。发送到远程服务器主要会导致网络延迟，服务器开销很小。

所以你在性能方程中有两个变量，客户端的处理速度和网络延迟。还有第三个变量，数据量，但在你的问题中这是恒定的 10k。

如果客户端浏览器和网络都很快，请使用您喜欢的任何内容。

如果网络速度较快，请使用远程服务器方法，但请注意不要让服务器因数千个小请求而过载。

如果客户端速度更快，可能会使用本地方法。（见下文）

如果两者都很慢，那么您可能需要选择其中一个，或者花费大量时间和精力来优化它。

两个客户端都很慢很容易发生，我在 3G 上的手机浏览器属于这一类，随机 Ajax 请求的网络延迟约为 200 毫秒，并且对于某些 JavaScript 也表现不佳。

由于用户认为性能是最重要的，您可以在初始页面加载中将每个字母的前 N ​​个值作为变量预加载，然后将这些用于第一次击键结果，这可以为您购买几毫秒。

如果您使用服务器方法，您始终可以为下一次击键发送请求的结果和一些值。这与用户看到的内容重叠，并使其在慢速网络上显得更加敏捷。例如

Client --> request 'ch'
Server responds with a few result for each potential next letter
    'cha' = ...
    'chb' = ...
    Etc

This of course requires some specialized javascript to alternate between Ajax requests and using cached results from previous requests to prefill the selection.

If you are going with the local client searching through all 10k records, then make sure the server returns the records in sorted order. If your autocomplete scanning is able to use 'starting with' selection rather than 'contains' (eg typing RO will match Rotorua but not Paeroa) then you can greatly reduce processing time by using http://en.wikipedia.org/wiki/Binary_search_algorithm techniques, and I'm sure there are lots of SO answers on this area.

于 2013-03-12T19:23:07.833 回答