Как повысить производительность автозаполнения JQuery

Question

Я планировал использовать автозаполнение jquery для сайта и внедрил тестовую версию. Im теперь использует вызов ajax для извлечения нового списка строк для каждого ввода символа. Проблема в том, что он становится довольно медленным, за 1,5 с до заполнения нового списка. Каков наилучший способ быстро сделать автозаполнение? Я использую cakephp и просто занимаюсь поиском и с лимитом в 10 предметов.

Answer 1

This article - о том, как flickr делает автозаполнение очень хорошо читать. У меня было несколько «вау», которые он читал.

«Этот виджет загружает список всех ваших контактов, в JavaScript, в под 200мс (это верно даже для членов с 10,000+ контактами). В для того, чтобы получить такой уровень производительности , мы должны были полностью отказаться от того, как мы отправляем данные с сервера клиенту ».

Answer 2

Реальная проблема для скорости в этом случае, я считаю, это время, необходимое для запуска запроса в базе данных. Если нет возможности повысить скорость вашего запроса, то, возможно, расширение вашего поиска, чтобы включить больше элементов с некоторыми высоко оцененными результатами, вы можете выполнить один поиск по каждому другому персонажу и фильтровать по результатам 20-30 на стороне клиента.

Это может улучшить внешний вид производительности, но в 1,5 секунды я бы попытался улучшить скорость запроса.

Кроме этого, если вы можете дать нам дополнительную информацию, я могу дать вам более конкретный ответ.

Удачи вам!

Answer 3

1,5-секундные интервалы - это очень широкие промежутки для обслуживания автозаполнения.

1. Во-первых, оптимизируйте свой запрос и db соединений. Попробуйте сохранить ваше соединение db с кэшированием памяти.
2. Использовать методы кэширования результатов, если ваш сервис очень часто используется для игнорирования повторных выборок.
3. Используйте клиентский кеш (список JS) для хранения старых запросов на клиенте. Если пользователь вводит обратно и стирается, это будет полезно. Результаты будут получены из кеша frontend вместо базовой точки.
4. Фильтрация регулярных выражений на стороне клиента не будет дорогостоящей, вы можете дать ей шанс.

Answer 4

Прежде чем делать некоторые оптимизации, вы должны сначала проанализировать, где находится горло бутылки. Попытайтесь выяснить, как долго проходит каждый шаг (ввод → запрос → запрос db → ответ → отображение). Возможно, реализация CakePHP имеет задержку, чтобы не отправлять запрос для каждого введенного символа.

Answer 5

Сторона сервера на PHP/SQL работает медленно.

Не используйте PHP/SQL. Моя автозаполнение написано на C++ и использует hashtables для поиска. См. Производительность here.

Это компьютер Celeron-300, FreeBSD, Apache/FastCGI.

И, видите ли, быстро бегает по огромным словарям. 10 000 000 записей не проблема.

Также поддерживает приоритеты, динамические переводы и другие функции.

Answer 6

Автозаполнение само по себе не является медленным, хотя ваша реализация, безусловно, может быть. Первое, что я хотел бы проверить, это значение параметра задержки (см. JQuery docs). Затем я проверил бы ваш запрос: вы могли бы вернуть только 10 записей, но вы делаете огромное сканирование таблицы, чтобы получить эти 10 записей? Вы возвращаете тонну записей из базы данных в коллекцию, а затем берете 10 элементов из коллекции, а не выполняете подкачку на стороне сервера в базе данных? Простой индекс может помочь, но вам нужно будет провести некоторое тестирование, чтобы быть уверенным.

Answer 7

Попробуйте предварительно загрузить объект списка вместо выполнения запроса на лету.

Также автозаполнение имеет задержку 300 мс по умолчанию.
Возможно удалить задержку

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