2009-05-03 39 views
45

我打算为一个站点使用jquery自动完成功能,并且已经实现了一个测试版本。我现在使用ajax调用来为每个字符输入检索一个新的字符串列表。问题在于它在新的列表填充之前变得相当慢,1.5s。什么是快速实现自动填充的最佳方式?我使用cakephp,只是做了一个查找,并有10个项目的限制。如何提高Jquery自动完成的性能

+0

是否包括1.5秒的自动完成的等待时间(即,它会等待,以确保你不会打字额外字符的时间)? – Powerlord 2009-05-04 16:34:01

+0

这个查询是什么样的? 1.5个10个项目的速度非常慢。看到我下面关于SOLR的其他评论。像数百万行的魅力一样为我们工作。 – Ligemer 2013-04-23 02:05:47

+0

最好的改进...使用选定的jquery插件! – 2016-10-18 15:57:08

回答

52

This article - 关于如何flickr自动完成是一个很好的阅读。我有几个“哇”的阅读经验。

“这个小工具下载的200ms下您的联系人,在JavaScript中的所有 的列表,在 (这是真实的,即使对于 成员10000个联系人)。在 为了获得这个级别的 性能,我们必须完全重新考虑 服务器向客户端发送数据的方式。“

4

在这种情况下速度的真正问题我相信是在数据库上运行查询所花费的时间。如果没有办法提高查询速度,那么也许可以扩展搜索范围,使其包含更多具有高度排名结果的项目,您可以对每个其他字符执行一次搜索,并在客户端过滤20-30个结果。

这可能会改善性能的外观,但在1.5秒时,我会先尝试提高查询速度。

除此之外,如果你能给我们更多的信息,我可能会给你一个更具体的答案。

祝你好运!

+0

是的,我也打算提出这个建议。在客户端做一些过滤。 – Niyaz 2009-05-03 18:04:11

+0

老兄!使用SOLR。您可以直接点击该网址。我刚刚完成将它集成到一个项目中,这将解决您的分贝查询问题。您甚至可以将数据从MySQL加载到SOLR(我从cakephp中假设)。 – Ligemer 2013-04-23 02:04:14

11

1.5秒间隔是非常广泛的差距,为自动完成服务提供服务。

  1. 首先优化您的查询和db 连接。尝试保持你的数据库连接 与内存缓存存活。
  2. 如果您的 服务被高度用于忽略重新提取,请使用结果缓存方法。
  3. 使用客户端缓存(JS列表)来保留客户端上的旧请求。如果用户输入并擦除,它将很有用。结果将来自前端缓存而不是后端点。
  4. 正则表达式在客户端过滤不会很贵,你可以给它一个机会。
5

在做一些优化之前,您应该首先分析瓶颈在哪里。尝试找出每个步骤(输入→请求→数据库查询→响应→显示)需要多长时间。也许CakePHP实现有一个延迟,不会为输入的每个字符发送请求。

4

PHP/SQL上的服务器端速度很慢。

请勿使用PHP/SQL。我用C++编写的自动完成,并使用哈希表进行查找。见表现here

这是Celeron-300电脑,FreeBSD,Apache/FastCGI。

而且,你看,在巨大的字典上运行得很快。 10,000,000条记录不是问题。

此外,支持优先级,动态转换和其他功能。

1

自动完成本身并不慢,尽管您的实现当然可以。我首先要检查的是延迟选项的值(请参阅jQuery文档)。接下来,我会检查你的查询:你可能只会带回10条记录,但你是否正在做一个巨大的表扫描来获得这10条记录?你是否将数据库中的大量记录带回集合,然后从集合中取出10个项目,而不是在数据库上进行服务器端分页?一个简单的索引可能会有所帮助,但是您必须进行一些测试才能确定。

36

尝试预加载您的列表对象,而不是实时查询。

此外,默认情况下,自动完成延迟时间为300毫秒。
也许去除延迟

$(".selector").autocomplete({ delay: 0 });