Cómo mejorar el rendimiento del autocompletado de Jquery

6 minutos de lectura

avatar de usuario
Bjorn

Estaba planeando usar jquery autocompletar 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 carácter. El problema es que se vuelve bastante lento, 1,5 s antes de que se complete la nueva lista. ¿Cuál es la mejor manera de hacer que el autocompletado sea rápido? Estoy usando cakephp y solo haciendo una búsqueda y con un límite de 10 elementos.

  • ¿Los 1.5s incluyen el tiempo de espera de autocompletar (es decir, el tiempo que espera para asegurarse de que no esté escribiendo caracteres adicionales)?

    – señor del poder

    4 de mayo de 2009 a las 16:34

  • ¿Cómo es esta consulta? 1.5s para 10 artículos es ridículamente lento. Vea mi otro comentario a continuación sobre SOLR. Funcionó de maravilla para nosotros con millones de filas para pasar.

    – Ligemer

    23 de abril de 2013 a las 2:05

  • La mejor mejora … ¡usa el complemento jquery elegido!

    – Pablo Zahra

    18/10/2016 a las 15:57

Este artículo – sobre cómo Flickr autocompletar es una muy buena lectura. Tuve algunas experiencias “wow” al leerlo.

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

  • Entonces, ¿simplemente envían una lista csv al usuario?

    – tstenner

    13 de febrero de 2011 a las 18:53

  • ¿Alguien puede ayudarme a entender cómo puedo usarlo? Actualmente estoy usando la solicitud Ajax al servidor y JSON como medio. El lado del servidor está escrito en C#.NET. Allí se implementa un identificador para atender la solicitud.

    – soham

    1 de julio de 2013 a las 8:54

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

Además, el autocompletado tiene un retraso de 300 ms por defecto.
Tal vez quitar el retraso

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

  • +1 por retraso. Olvidé que esta es una de las razones. No sé por qué el tiempo de retardo predeterminado es de 300 ms pero no de 0 ms.

    usuario503853

    21 de enero de 2013 a las 17:37

  • +1 aquí también si sus consultas están bien. Si sus consultas toman tanto tiempo para 10 elementos de la lista, entonces algo está mal con sus consultas y esta no es la respuesta que necesita.

    – Ligemer

    23 de abril de 2013 a las 2:02

  • JQuery oficial que dice el valor predeterminado para la opción de retraso api.jqueryui.com/autocomplete/#option-delay

    – Ahmed Hamdy

    18 de noviembre de 2015 a las 20:21

  • @DarrenCato +1 ¡Muchas gracias! Nunca supe sobre el retraso predeterminado y los usuarios se quejaban de que era lento. Eres una leyenda entre los hombres.

    – Mas Notsram

    29 de marzo de 2017 a las 12:53

avatar de usuario
Burcu Dogan

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

  1. En primer lugar, optimice su consulta y las conexiones de base de datos. Intente mantener viva su conexión db con el almacenamiento en caché de memoria.
  2. Use métodos de almacenamiento en caché de resultados si su servicio se usa mucho para ignorar las recuperaciones.
  3. Use un caché de cliente (una lista JS) para mantener las solicitudes antiguas en el cliente. Si el usuario vuelve a escribir y borra, será útil. Los resultados provendrán de la caché de frontend en lugar del punto de backend.
  4. El filtrado Regex en el lado del cliente no será costoso, puede darle una oportunidad.

Antes de hacer algunas optimizaciones, primero debe analizar dónde está el cuello de botella. Intente averiguar cuánto tiempo lleva cada paso (entrada → solicitud → consulta de base de datos → respuesta → visualización). Tal vez la implementación de CakePHP tenga un retraso para no enviar una solicitud por cada carácter ingresado.

avatar de usuario
olegarca

El lado del servidor en PHP/SQL es lento.

No use PHP/SQL. Mi autocompletado está escrito en C++ y usa tablas hash para buscar. Ver rendimiento aquí.

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

Y, verá, se ejecuta rápido en diccionarios enormes. 10.000.000 registros no es un problema.

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

  • ¿Cómo conectas c ++ y php para mostrar datos?

    – May’Habit

    23 de enero de 2020 a las 16:29

  • Puede usar cualquier interfaz lib, por ejemplo, esto: php-cpp.com ; En mi autocomp, no usé PHP, escribí el programa FCGI en C++ y lo ejecuté desde Apache. Actualmente, mi demostración no funciona (la compilación se bloqueó), pero si es necesario, puedo proporcionarle la fuente.

    – olegarca

    23 de enero de 2020 a las 20:01

  • que maravilla, tu comentario del 2010 y ahora respondes mi pregunta. Leí su comentario y busqué en Google, pero no tengo idea de cómo funcionan mi base de datos y C ++. Puedo hacerte unas preguntas. Uso la base de datos mysql, ¿cómo lleno los datos de mysql a la tabla hash de C++? ¿Qué tipo de base de datos usa y cómo la pasa a la tabla hash de C++? ¿Cómo el programa FCGI devuelve datos para el navegador? Y muchas gracias, por favor envíeme su fuente.

    – May’Habit

    24 de enero de 2020 a las 13:49

avatar de usuario
Miguel

Creo que el verdadero problema de la velocidad en este caso es el tiempo que lleva ejecutar la consulta en la base de datos. Si no hay forma de mejorar la velocidad de su consulta, entonces 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 a través de 20-30 resultados en el lado del cliente.

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

Aparte de eso, si puede darnos más información, tal vez pueda darle una respuesta más específica.

¡Buena suerte!

  • ¿Cómo conectas c ++ y php para mostrar datos?

    – May’Habit

    23 de enero de 2020 a las 16:29

  • Puede usar cualquier interfaz lib, por ejemplo, esto: php-cpp.com ; En mi autocomp, no usé PHP, escribí el programa FCGI en C++ y lo ejecuté desde Apache. Actualmente, mi demostración no funciona (la compilación se bloqueó), pero si es necesario, puedo proporcionarle la fuente.

    – olegarca

    23 de enero de 2020 a las 20:01

  • que maravilla, tu comentario del 2010 y ahora respondes mi pregunta. Leí su comentario y busqué en Google, pero no tengo idea de cómo funcionan mi base de datos y C ++. Puedo hacerte unas preguntas. Uso la base de datos mysql, ¿cómo lleno los datos de mysql a la tabla hash de C++? ¿Qué tipo de base de datos usa y cómo la pasa a la tabla hash de C++? ¿Cómo el programa FCGI devuelve datos para el navegador? Y muchas gracias, por favor envíeme su fuente.

    – May’Habit

    24 de enero de 2020 a las 13:49

avatar de usuario
Sean Chase

Autocompletar en sí mismo no es lento, aunque su implementación ciertamente podría serlo. Lo primero que verificaría es el valor de su opción de retraso (consulte los documentos de jQuery). A continuación, verificaría su consulta: es posible que solo traiga 10 registros, pero ¿está haciendo un escaneo de tabla enorme para obtener esos 10 registros? ¿Está trayendo una tonelada de registros de la base de datos a una colección y luego tomando 10 elementos de la colección en lugar de hacer una paginación del lado del servidor en la base de datos? Un índice simple podría ayudar, pero tendrá que hacer algunas pruebas para estar seguro.

¿Ha sido útil esta solución?