Как улучшить производительность автозаполнения Jquery

Question

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

Answer 1

Эта статья - о том, как flickr делает автозаполнение, очень хорошо читается. У меня было несколько впечатлений "вау", читая это.

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

Answer 5

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

Не используйте PHP / SQL. Мой автозаполнение написано на C ++ и использует хеш-таблицы для поиска. Посмотреть спектакль здесь .

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

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

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

Answer 6

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

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

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

Удачи!

Answer 7

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