Comment améliorer les performances de Jquery autocomplete

Question

Je prévoyais d’utiliser jquery autocomplete pour un site et d’avoir mis en place une version test. J'utilise maintenant un appel ajax pour récupérer une nouvelle liste de chaînes pour chaque entrée de caractère. Le problème est que cela devient plutôt lent, 1,5 secondes avant que la nouvelle liste ne soit remplie. Quel est le meilleur moyen de rendre l'auto-complétion rapide? J'utilise cakephp et je viens de faire une recherche, avec une limite de 10 objets.

Answer 1

Cet article - sur la manière dont flickr effectue la saisie semi-automatique est une très bonne lecture. J'ai eu quelques "wow" expériences en le lisant.

  

" Ce widget télécharge la liste de tous les   de vos contacts, en JavaScript, en   moins de 200 ms (cela est vrai même pour   membres ayant plus de 10 000 contacts). Dans   afin d'obtenir ce niveau de   performance, nous avons dû complètement   repenser la façon dont nous envoyons des données à partir du   serveur au client. "

Answer 2

Essayez de précharger votre objet de liste au lieu de faire la requête à la volée.

Par ailleurs, la saisie semi-automatique a un délai de 300 ms par défaut.
Peut-être supprimer le délai

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

Answer 3

Les intervalles de 1,5 seconde sont des intervalles très importants pour servir un service de saisie semi-automatique.

1. Optimisez d’abord votre requête et votre base de données les liaisons. Essayez de garder votre connexion à la base de données vivant avec la mise en cache de la mémoire.
2. Utilisez les méthodes de mise en cache des résultats si votre le service est très utilisé pour ignorer les requêtes extraites.
3. Utilisez un cache client (une liste JS) pour conserver les anciennes requêtes sur le client. Si l'utilisateur tape en arrière et efface, ce sera utile. Les résultats viendront du cache frontal au lieu du point final.
4. Filtrer les regex côté client ne sera pas coûteux, vous pouvez lui donner une chance.

Answer 4

Avant de procéder à certaines optimisations, vous devez d'abord analyser l'emplacement du goulot d'étranglement. Essayez de savoir combien de temps chaque étape (saisie de la requête & # 8594; requête de la requête de base de données & # 8594;) & # 8594;). Peut-être que l’implémentation de CakePHP a un délai pour ne pas envoyer de requête pour chaque caractère entré.

Answer 5

Le vrai problème de rapidité dans ce cas est, à mon avis, le temps nécessaire pour exécuter la requête sur la base de données. S'il n'y a aucun moyen d'améliorer la vitesse de votre requête, vous pouvez peut-être élargir votre recherche pour inclure davantage d'éléments avec des résultats très bien classés. Vous pouvez effectuer une recherche sur tous les caractères et filtrer entre 20 et 30 résultats côté client.

Cela peut améliorer l'apparence des performances, mais au bout de 1,5 seconde, j'essayais tout d'abord d'améliorer la vitesse de la requête.

En dehors de cela, si vous pouviez nous donner plus d'informations, je pourrais peut-être vous donner une réponse plus précise.

Bonne chance!

Answer 6

La version serveur de PHP / SQL est lente.

N'utilisez pas PHP / SQL. Mon autocomplete écrit en C ++ et utilise des hashtables pour rechercher. Voir les performances ici .

Il s’agit d’un ordinateur Celeron-300, FreeBSD, Apache / FastCGI.

Et, voyez-vous, fonctionne rapidement avec d’énormes dictionnaires. 10 000 000 enregistrements ne posent aucun problème.

Prend également en charge les priorités, les traductions dynamiques et d'autres fonctionnalités.

Answer 7

La saisie semi-automatique en elle-même n’est pas lente, bien que votre implémentation le soit certainement. La première chose que je voudrais vérifier est la valeur de votre option de délai (voir la documentation sur jQuery). Ensuite, je vérifierais votre requête: vous rapportez peut-être seulement 10 enregistrements, mais effectuez-vous une analyse de table volumineuse pour obtenir ces 10 enregistrements? Ramenez-vous une tonne d'enregistrements de la base de données dans une collection, puis prenez-vous 10 éléments de la collection au lieu d'effectuer une pagination côté serveur sur la base de données? Un index simple pourrait aider, mais vous devrez faire des tests pour en être sûr.