Cómo mejorar el rendimiento de Autocompletar de Jquery

Question

Estaba planeando usar el autocompletado de jquery para un sitio y he implementado una versión de prueba. Ahora estoy usando una llamada ajax para recuperar una nueva lista de cadenas para cada entrada de caracteres. El problema es que se vuelve bastante lento, 1.5 segundos antes de que se llene la nueva lista. ¿Cuál es la mejor manera de hacer autocompletar rápido? Estoy usando cakephp y estoy haciendo un hallazgo y con un límite de 10 elementos.

Answer 1

This article - acerca de cómo flickr hace autocompletar es una muy buena lectura. Tuve algunas experiencias "guau" al leerlo.

"Este widget de descarga una lista de todos de sus contactos, en JavaScript, en virtud de 200 ms (esto es cierto incluso para miembros con más de 10.000 contactos). En fin de obtener este nivel de rendimiento , tuvimos que por completo repensar cómo enviamos datos desde el servidor al cliente ".

Answer 2

El verdadero problema para la velocidad en este caso, creo que es el tiempo que lleva correr la consulta en la base de datos. Si no hay forma de mejorar la velocidad de su consulta, tal vez extienda su búsqueda para incluir más elementos con algunos resultados altamente calificados, puede realizar una búsqueda cada dos caracteres y filtrar entre 20 y 30 resultados en el lado del cliente.

Esto puede mejorar la apariencia del rendimiento, pero en 1,5 segundos, primero trataría de mejorar la velocidad de consulta.

Aparte de eso, si nos puede dar más información, puedo darle una respuesta más específica.

¡Buena suerte!

Answer 3

Los intervalos de 1,5 segundos son espacios muy anchos para servir un servicio de autocompletar.

1. En primer lugar optimice su consulta y db conexiones. Intente mantener viva su conexión de db con memoria caché.
2. Use los métodos de caché de resultados si su servicio es muy utilizado para ignorar re-fetch.
3. Use un caché de cliente (una lista JS) para mantener las solicitudes anteriores en el cliente. Si el usuario teclea y borra, te será útil. Los resultados vendrán de la memoria caché frontend en lugar de backend point.
4. El filtrado Regex en el lado del cliente no será costoso, puede darle una oportunidad.

Answer 4

Antes de realizar algunas optimizaciones, primero debe analizar dónde se encuentra el cuello de la botella. Intente averiguar cuánto tarda cada paso (entrada → solicitud → consulta db → respuesta → visualización). Tal vez la implementación de CakePHP tiene un retraso para no enviar una solicitud por cada carácter ingresado.

Answer 5

El lado del servidor en PHP/SQL es lento.

No utilice PHP/SQL. Mi autocompletar escrito en C++, y utiliza hashtables para buscar. Vea el rendimiento here.

Esta es la computadora Celeron-300, FreeBSD, Apache/FastCGI.

Y, como ve, funciona rápido en grandes diccionarios. 10,000,000 de registros no es un problema

Además, admite prioridades, traducciones dinámicas y otras características.

Answer 6

Autocompletar no es lento, aunque su implementación ciertamente podría serlo. Lo primero que verificaría es el valor de su opción de demora (consulte los documentos de jQuery). A continuación, verificaría su consulta: es posible que solo vuelva a traer 10 registros, pero ¿está realizando un análisis de tabla enorme para obtener esos 10 registros? ¿Trae una tonelada de registros de la base de datos a una colección y luego toma 10 elementos de la colección en lugar de hacer una búsqueda en el servidor en la base de datos? Un índice simple podría ayudar, pero tendrá que hacer algunas pruebas para estar seguro.

Answer 7

Pruebe precargar su objeto de lista en lugar de hacer la consulta sobre la marcha.

También la autocompleta tiene un retardo de 300 ms por defecto.
eliminar Tal vez el retraso

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