la mia premessa era sbagliata. mentre AngularJS stava certamente rallentando le cose, non era dovuto al problema che descrivo qui sotto. tuttavia, è stata la risposta di Flim alla mia domanda - come escludere un elemento da un ambito angolare - che è stato in grado di provarlo.come posso escludere un elemento da un ambito angolare?
Sto costruendo un sito che genera grafici utilizzando d3 + Raphael da dati recuperati con AJAX. questo si traduce in un sacco di elementi SVG o VML nel DOM, a seconda del tipo di grafico che l'utente sceglie di eseguire il rendering (ad esempio, la torta ha pochi, la riga e la barra in pila ne hanno molti, per esempio).
Si è verificato un problema in cui l'immissione di testo in campi di testo controllati da AngularJS porta a una scansione di Firefox. Digito alcuni caratteri, quindi attendo 2-3 secondi per visualizzarli all'improvviso, quindi ne scriverò altri ancora, ecc. (Chrome sembra gestire questo aspetto leggermente meglio.)
quando non c'è alcun grafico sulla pagina (l'utente non ha fornito dati sufficienti per crearne uno), la modifica dei contenuti di questi campi di testo va bene. I assume AngularJS sta avendo problemi quando tenta di aggiornare il DOM e ci sono centinaia di elementi SVG o VML che deve esaminare.
il grafico, tuttavia, non contiene nulla di cui AngularJS si debba preoccupare. (Ci sono, tuttavia, elementi dell'interfaccia utente sia prima che dopo il grafico che ha bisogno di prestare attenzione.)
Mi vengono in mente due soluzioni:
messo DIV del grafico al di fuori del controllo AngularJS , e usa il CSS per posizionarlo dove è effettivamente desiderato
dire ad AngularJS - in qualche modo - di non modificare il DIV del grafico; per saltare sopra quando mantenendo la vista e il modello in-sync
la seconda opzione sembra preferibile per me, dal momento che mantiene il layout del documento sano/semantica. C'è un modo per fare questo? (o qualche soluzione ancora migliore a cui non avessi pensato?)
Hai provato ng-non-bindale? http://docs.angularjs.org/api/ng.directive:ngNonBindable –
Perché pensi che Angular debba esaminare tutti gli elementi SVG/VML? Questi elementi sono generati da Angular? Se no, allora Angular non li sta guardando. Angular compila solo il documento HTML (DOM) una volta: http://docs.angularjs.org/guide/concepts#startup –
ng-non-bindable è esattamente quello che stavo cercando! ma dimostra anche quello che Mark ha detto: Angular non è infatti lento a causa dell'SVG/VML generato da Raphael. ignorare questo blocco non aiuta. poiché il problema non esiste in Chrome e il profilo di Firebug è meno informativo di quello di Chrome, è difficile dire esattamente dove si trova il rallentamento ... Continuerò a scavare. Mi piacerebbe davvero dare a Flim un credito completo per rispondere alla mia domanda iniziale, però. – Ben