J'ai récemment couru dans un peu de douleur. J'utilise la boîte de dialogue JQuery pour afficher quelques écrans de configuration dans une application Web. Rien de trop spécial. Cependant, j'ai quelques cas de bords où ce formulaire de configuration affichera une descente de certains ... 11000 options. [Dodges tomates pourries]
Inutile de dire que c'est lent. Il peut prendre jusqu'à 9 secondes pour que la boîte de dialogue JQuery se présente (et l'init est aussi lent).
première question est la suivante: y a-t-il un moyen d'accélérer les boîtes de dialogue? De ce qu'il semble, il copie tout le contenu chaque fois qu'il s'ouvre. S'il y avait un moyen d'éviter cela, cela aiderait un peu.
Deuxième question: Y a-t-il une autre boîte de dialogue JQuery qui fonctionne mieux lorsqu'il est demandé d'afficher de grandes quantités de données?
Et comme toujours, d'autres solutions sont les bienvenues. Un peu d'ajax autocomplete ne serait pas mauvais, mais il est probablement toujours lent que si cela n'aurait besoin d'au moins quelques personnages initiaux.
8 Réponses :
Que diriez-vous d'une sélection avec toutes les premières lettres possibles Obtenir via les options Ajax uniquement en commençant par cette lettre dans la seconde sélection?
géré pour améliorer les performances un peu. Je me suis égaré de la JQuery UI et j'ai créé une version beaucoup plus claire. Au lieu de copier le contenu de ma cible dans ma boîte de dialogue, je construis mon dialogue autour du contenu.
performance sage, la boîte de dialogue est passée d'environ 10 secondes à 2.
2 secondes sonne beaucoup mieux, mais vous trouverez probablement qu'il dépend beaucoup du navigateur des utilisateurs et de la configuration système - cela pourrait être bien pire sur un système plus lent dans IE ...
J'envisagerais sérieusement d'utiliser quelque chose d'autre au lieu de la liste déroulante Mammoth (ce qui ne peut sûrement pas être très convivial) - cela ressemble à un bon candidat à une boîte de recherche automatique, ou peut-être une goutte à cascade multi-niveaux. Downs.
Vous pouvez également créer la boîte de dialogue lorsque la page se charge et l'ouvrir uniquement si nécessaire (définissez AUTOOPEN: FALSE dans les options)
Si vous devez faire une liste déroulante dans une boîte de dialogue comme celle-ci, je suggère de charger les informations dans un style de page AJAX caché après la charge de la page, puis affichant que Hidden Div dans n'importe quelle unité de logement / boîte de dialogue que vous utilisez lorsque c'est nécessaire. De cette façon, les trucs seront chargés pendant que l'utilisateur fait d'autres choses, et j'espère être prêt au moment où ils sont.
Ce serait une bonne solution pour la charge initiale. Bien que la charge n'ait pas été influencée trop horrible. La question est arrivée quand il était temps de rendre la descente. Initialement, le div est invisible et tout se passe bien. Le plus gros problème était que la boîte de dialogue JQuery UI a dû copier toutes ces informations dans le DOM afin de le déplacer dans ses conteneurs personnalisés. Il a également fait cela chaque fois que la boîte de dialogue a été chargée. La nouvelle boîte de dialogue enveloppe maintenant les données existantes plutôt que de la copier. Cela semblait accélérer un peu les choses. Est-ce que la lutte avec le lavage semi-transparent mais cela fonctionne assez bien maintenant.
Selon ce que vous utilisez HTML pour afficher les données, c'est-à-dire peut être super lente vs chrome ou firefox.
Surtout lorsque vous affichez de grandes tables. Ces liens pourraient être utiles - vous pourriez même vous associer un peu plus de temps.
http: //jquery-howto.blogspot.com/2009/02/5-eesty-tips-on-how-a-imProve-code.html
http://www.artzstudio.com/2009/04/JQUERY -Performance-règles /
Je suis confronté à ce problème et j'ai trouvé la solution ici: http://forum.jquery.com/topic/select-in-dialog-causes-slowness-in-ie8
Il suffisait de définir la boîte de dialogue draggable et redimensionnable Options sur false .
Je viens de tomber sur votre réponse en lutte avec le même problème. Travaillé comme un charme!
Wow, quelle bizarre co-incidence. Je rencontre ce même problème à nouveau plus d'un an plus tard sur une case en cours d'exécution à savoir 10 et constaté que redimensionnable et dragge semble avoir un impact discernable sur la lenteur.
Réglage draggible et redimensionnable sur False Travaillé.
J'ai un problème similaire (mais sans le goulot gigantesque) et que vous définissez draggible et redimensionnable à FALSE ne fonctionnait pas pour moi.
Je viens de courir dans ce numéro à l'aide d'une boîte de dialogue à onglets avec des centaines de cases à cocher. J'ai trouvé Ce lien est très utile. Il a pris 17 ans pour ouvrir la boîte de dialogue avant, mais maintenant, c'est jusqu'à environ 1,3.
( J'utilise une boîte de dialogue / em>) em>) Le truc est de détacher le HTML avant d'ouvrir la boîte de dialogue, puis utilisez la fonction ouvrir em> pour la boîte de dialogue. Pour parcourez le contenu. P> $('#triggerDialogFast').click(function () {
var $dialogContainer = $('#dialogContentFast');
var $detachedChildren = $dialogContainer.children().detach();
$dialogContainer.dialog({
width: 425,
height: 400,
draggable: false,
resizable: false,
open: function () {
$detachedChildren.appendTo($dialogContainer);
},
});
});
Homme, c'est une liste déroulante Looooong. Même si vous êtes capable de résoudre votre problème technique, je suggérerais d'utiliser différentes contrôles peut-être une liste filtrée ou une sorte de navigateur de données. En fonction du contenu de données.