如何提高 Jquery 自动完成的性能

Posted 2023-03-05

【中文标题】如何提高 Jquery 自动完成的性能

【英文标题】：How to improve performance of Jquery autocomplete

【发布时间】：2010-10-23 11:40:45

【问题描述】：

我计划在一个站点上使用 jquery 自动完成功能，并实现了一个测试版本。我现在使用 ajax 调用来检索每个字符输入的新字符串列表。问题是它变得相当慢，在填充新列表之前 1.5 秒。快速自动完成的最佳方法是什么？我正在使用 cakephp，只是做了一个查找，并且限制为 10 个项目。

【问题讨论】：

1.5s 是否包括自动完成的等待时间（即它等待确保您没有输入额外字符的时间）？

这个查询是什么样的？ 10 个项目的 1.5 秒慢得离谱。请参阅下面关于 SOLR 的其他评论。对我们来说就像一个魅力，需要经过数百万行。

最好的改进...使用选择的 jquery 插件！

【参考方案1】：

PHP/SQL 的服务器端很慢。

不要使用 PHP/SQL。我的自动完成是用 C++ 编写的，并使用哈希表进行查找。查看性能here。

这是 Celeron-300 计算机、FreeBSD、Apache/FastCGI。

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

此外，还支持优先级、动态翻译和其他功能。

【讨论】：

c++和php如何连接显示数据？

你可以使用任何接口库，例如 - 这个：php-cpp.com;在我的自动计算中，我没有使用 PHP，我在 C++ 上编写了 FCGI 程序，并从 Apache 运行它。目前，我的演示无法正常工作（comp 已崩溃），但如果需要 - 我可以为您提供源代码。

太棒了，您在 2010 年发表的评论，现在您回答了我的问题。我已经阅读了您的评论并在 google 上进行了搜索，但我不知道我的数据库和 C++ 是如何工作的。我可以问你一些问题吗？我使用 mysql 数据库，如何将数据从 mysql 填充到 C++ 哈希表？您使用什么样的数据库以及如何将其传递给 C++ 哈希表？ FCGI程序如何为浏览器返回数据？非常感谢你，请把你的来源发给我。

【参考方案2】：

尝试预加载您的列表对象，而不是即时执行查询。

默认情况下，自动完成还有 300 毫秒的延迟。 也许消除延迟

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

【讨论】：

+1 表示延迟。我忘了这是原因之一。我不知道为什么默认延迟时间是 300 毫秒而不是 0 毫秒。

如果您的查询很好，也可以在这里 +1。如果您的查询需要 10 个列表项的时间那么长，那么您的查询有问题，这不是您需要的答案。

官方 JQuery 表示延迟选项的默认值api.jqueryui.com/autocomplete/#option-delay

@DarrenCato +1 非常感谢！从来不知道默认延迟，用户抱怨它很慢。你是男人中的传奇。

【参考方案3】：

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

【参考方案4】：

1.5 秒的间隔对于提供自动完成服务来说是一个非常大的间隔。

首先优化您的查询和数据库 连接。尝试保持您的数据库连接 充满活力的内存缓存。 如果您的 服务被高度用于忽略重新获取。 使用客户端缓存（JS 列表）将旧请求保留在客户端上。如果用户键入并擦除，它将很有用。结果将来自前端缓存而不是后端点。 客户端的正则表达式过滤成本不会很高，你可以给它一个机会。

【参考方案5】：

This article - 关于flickr 如何自动完成是一本很好的读物。我有一些“哇”的阅读体验。

"此小部件下载所有 您的联系人，在 javascript 中，在 低于 200 毫秒（即使对于 拥有 10,000 多个联系人的成员）。在 为了得到这个水平 性能，我们不得不完全 重新思考我们如何从 服务器到客户端。”

【讨论】：

所以他们只是向用户发送一个 csv 列表？

谁能帮我理解如何使用它？我目前正在使用对服务器的 Ajax 请求和 JSON 作为媒介。服务器端是用 C#.NET 编写的。在那里实现了一个句柄来处理请求。

【参考方案6】：

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

【参考方案7】：

我认为在这种情况下速度的真正问题是在数据库上运行查询所需的时间。如果没有办法提高您的查询速度，那么可能会扩展您的搜索以包含更多具有一些高排名结果的项目，您可以每隔一个字符执行一次搜索，并在客户端过滤 20-30 个结果。

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

除此之外，如果您能提供更多信息，我可能会给您更具体的答案。

祝你好运！

【讨论】：

是的，我也打算提出这个建议。在客户端做一些过滤。

老兄！使用 SOLR。您可以直接点击网址。我刚刚将它集成到一个项目中，这将解决您的数据库查询问题。您甚至可以将数据从 MySQL 加载到 SOLR（我假设来自 cakephp）。