Comment améliorer les performances de la saisie semi-automatique de Jquery
J'avais l'intention d'utiliser la saisie semi-automatique de jquery pour un site et j'ai implémenté une version de test. Im 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 qu'il devient plutôt lent, 1,5 s avant que la nouvelle liste ne soit remplie. Quelle est la meilleure façon d'accélérer la saisie semi-automatique? J'utilise cakephp et je fais juste une recherche et avec une limite de 10 articles.
Cet article - sur la façon dont flickr la saisie semi-automatique est une très bonne lecture. J'ai eu quelques expériences "wow" en le lisant.
"Ce widget télécharge une liste de tous vos contacts, en JavaScript, en moins de 200 ms (cela est vrai même pour les membres avec plus de 10 000 contacts). Pour obtenir ce niveau de performance, nous avons dû repenser complètement la façon dont nous envoyons les données à partir de du serveur au client. "
Essayez de précharger votre objet liste au lieu de faire la requête à la volée.
La saisie semi-automatique a également un retard de 300 ms par défaut.
Peut-être supprimer le délai
$( ".selector" ).autocomplete({ delay: 0 });
Les intervalles de 1,5 seconde sont des intervalles très larges pour servir un service de saisie semi-automatique.
- Tout d'abord, optimisez vos requêtes et vos connexions db. Essayez de maintenir votre connexion db en vie avec la mise en cache de la mémoire.
- Utilisez des méthodes de mise en cache des résultats si votre service est très utilisé pour ignorer les récupérations.
- Utilisez un cache client (une liste JS) pour conserver les anciennes requêtes sur le client. Si l'utilisateur tape et efface, cela va être utile. Les résultats proviendront du cache frontal au lieu du point principal.
- Le filtrage des expressions rationnelles côté client ne sera pas coûteux, vous pouvez lui donner une chance.
Avant de faire quelques optimisations, vous devez d'abord analyser où se trouve le goulot d'étranglement. Essayez de savoir combien de temps prend chaque étape (saisie → demande → requête db → réponse → affichage). Peut-être que l'implémentation de CakePHP a un délai pour ne pas envoyer de demande pour chaque caractère entré.
Le vrai problème de vitesse dans ce cas, je crois, est 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, alors peut-être en étendant votre recherche pour inclure plus d'éléments avec des résultats très bien classés, vous pouvez effectuer une recherche sur tous les autres caractères et filtrer 20 à 30 résultats côté client.
Cela peut améliorer l'apparence des performances, mais à 1,5 seconde, j'essaierais d'abord d'améliorer la vitesse de requête.
À part cela, si vous pouvez nous donner plus d'informations, je pourrai peut-être vous donner une réponse plus précise.
Bonne chance!
Côté serveur sur PHP/SQL est lent.
N'utilisez pas PHP/SQL. Ma saisie semi-automatique écrite en C++, et utilise des tables de hachage pour rechercher. Voir performances ici .
Il s'agit de l'ordinateur Celeron-300, FreeBSD, Apache/FastCGI.
Et, vous voyez, fonctionne rapidement sur d'énormes dictionnaires. 10 000 000 d'enregistrements ne sont pas un problème.
Prend également en charge les priorités, les traductions dynamiques et d'autres fonctionnalités.
La saisie semi-automatique n'est pas lente, bien que votre implémentation puisse certainement l'être. La première chose que je vérifierais est la valeur de votre option de délai (voir les documents jQuery). Ensuite, je vérifierais votre requête: vous ne ramenez que 10 enregistrements, mais effectuez-vous une énorme analyse de table 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 de paginer côté serveur sur la base de données? Un simple index pourrait aider, mais vous devrez faire des tests pour en être sûr.