Finestra di dialogo dell'interfaccia utente JQuery lenta

Question

Recentemente mi sono imbattuto in un po 'di dolore. Ho utilizzato la finestra di dialogo JQuery per visualizzare alcune schermate di configurazione in un'app Web. Niente di troppo speciale. Tuttavia ho un paio di casi limite in cui questo modulo di configurazione mostrerà un menu a discesa di alcune ... 11000 opzioni. [DODGES ROTTEN TOMATOES]

Inutile dire che è lento. Possono essere necessari fino a 9 secondi per mostrare la finestra di dialogo JQuery (e anche l'init è lento).

La prima domanda è: c'è un modo per velocizzare le finestre di dialogo? Da quello che sembra, copia tutto il contenuto ogni volta che si apre. Se ci fosse un modo per evitarlo, sarebbe di aiuto un po '.

Seconda domanda: ci sono altre finestre di dialogo jQuery che offrono prestazioni migliori quando viene richiesto di visualizzare grandi quantità di dati?

E come sempre, altre soluzioni sono benvenute. Alcuni ajax con completamento automatico non sarebbero male, ma probabilmente sarebbero ancora lenti a meno che non richiedessero almeno un paio di caratteri iniziali.

Answer 1

Gestito per migliorare un po 'le prestazioni. Mi sono allontanato dall'interfaccia utente di JQuery e ho creato una versione molto più leggera. Invece di copiare il contenuto del mio obiettivo nella mia finestra di dialogo, costruisco il mio dialogo attorno al contenuto.

prestazioni saggio, la finestra è passato da circa 10 secondi a 2.

Answer 2

Come scegliere una selezione con tutte le prime lettere possibili ottenute tramite AJAX solo le opzioni che iniziano con quella lettera nella seconda selezione?

Answer 3

2 secondi suona molto meglio, ma probabilmente trovare è molto dipendente dalla utenti del browser e del sistema di configurazione - potrebbe essere molto peggio su un sistema più lento in IE ...

Vorrei prendere seriamente in considerazione l'idea di utilizzare qualcos'altro invece del dropdown gigantesco (che sicuramente non può essere molto user friendly) - sembra un buon candidato per un casella di ricerca con completamento automatico o, eventualmente, elenchi a cascata a più livelli.

Si potrebbe anche creare la finestra al caricamento della pagina, e si aprono solo quando necessario (set AutoOpen: false nelle opzioni)

Answer 4

Se si deve fare un menu a discesa in una finestra del genere, poi ho suggerisco di caricare le informazioni in uno stile div ajax nascosto dopo il caricamento della pagina e quindi di visualizzare quel div nascosto in qualsiasi lightbox/dialog che stai usando quando è necessario. In questo modo le cose verranno caricate mentre l'utente sta facendo altre cose e, si spera, saranno pronte per il momento.

Answer 5

a seconda di quale codice html si sta utilizzando per visualizzare i dati, ad esempio può essere super slow vs chrome o firefox.

soprattutto quando si visualizzano tavoli grandi. questi link potrebbero essere utili - potresti anche perdere un po 'di tempo.

http://jquery-howto.blogspot.com/2009/02/5-easy-tips-on-how-to-improve-code.html

http://www.artzstudio.com/2009/04/jquery-performance-rules/

Answer 6

Ho faccia questo problema e trovato la soluzione qui: http://forum.jquery.com/topic/select-in-dialog-causes-slowness-in-ie8

solo dovuto impostare la finestra di dialogo draggable e resizable opzioni per false.

Answer 7

Impostazione trascinabile e ridimensionabile a falso lavorato.

Answer 8

Mi sono appena imbattuto in questo problema utilizzando una finestra di dialogo con schede con centinaia di caselle di controllo. Ho trovato this link molto utile. Ci sono voluti 17 secondi per aprire la finestra di dialogo in precedenza, ma ora è sceso a circa 1,3 secondi. (sto usando un trascinabile finestra ridimensionabile non)

Il trucco è quello di staccare il codice html prima di aprire la finestra di dialogo, e quindi utilizzare la funzione di aprire per la finestra di dialogo per ricollegare il contenuto.

$('#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); 
     }, 
    }); 
}); 

non sono sicuro ma dovrebbe probabilmente funzionerà semplicemente collegando il codice HTML a cielo aperto funzione di se ciò è possibile nel vostro scenario.