Come ottenere prestazioni più elevate dalla propria Web application realizzata con il framework JavaScript AngularJS? Una semplice risposta a questa domanda potrebbe essere trovata tramite la consultazione della documentazione ufficiale, senza la necessità di ricorrere a configurazioni particolari. L'accorgimento descritto rappresenta una soluzione pratica per l'ottimizzazione delle performance in fase di produzione.
Per comprendere il funzionamento di AngularJS in fase di esecuzione è necessario riferirsi al fatto che, come impostazione predefinita, la libreria associa le informazioni relative a binding e scope ai nodi del Document Object Model e aggiunge le classi CSS agli elementi databound.
Si tratta di una dinamica attraverso la quale le interpolazioni di ngBind, ngBindHtml o {{...}} hanno come risultato che i dati in binding e l'ng-binding vengono associati agli elementi corrispondenti. Dovrebbe poi essere considerato il ruolo del compilatore.
Quest'ultimo entra infatti in gioco al momento della creazione di un nuovo scope che, così come ng-scope o ng-isolated-scope, viene associato anch'esso all'elemento corrispondente; si vengono così a definire dei riferimenti accessibili attraverso element.scope() e element.isolateScope().
Quanto esposto potrebbe risultare utile durante i test, per esempio quando si utilizzano strumenti come il framework Protractor o l'estensione WebInspector per AngularJS di Google Chrome Batarang. Vi è invece la possibilità di evitare la produzione di dati per il debugging ottenendo un importante incremento di prestazioni grazie a questa semplice istruzione per la sua disattivazione:
myApp.config(['$compileProvider', function ($compileProvider) {
$compileProvider.debugInfoEnabled(false);
}]);Una recente rilevazione finalizzata a scoprire quanto fosse diffuso l'utilizzo di questo accorgimento presso gli sviluppatori avrebbe evidenziato che soltanto il 3.5% dei siti Web analizzati facevano ricorso ad esso.
Via AngularJS