2015-08-04 10 views
8

Sto provando ad accelerare il mio sito web. Questo è ciò che ho trovato negli strumenti di sviluppo di Chrome all'interno di Timeline/Profile JS. In contiene come 150 quelle blu Parse HTML (a schermo).angular.js - la funzione html parse sta prendendo 2000 ms e molto altro

enter image description here

E 'il 50% del tempo di caricamento. L'ho provato con un tablet e questa funzione ha richiesto anche 15000 ms! Sto impostando il provider di route in questo modo:

var start = '<div class="important">'; 
var end = '</div>'; 
$routeProvider.when('/test', { 
    template: start + 'some short text' + end 
}); 

Cosa c'è che non va? La dimensione completa del sito Web è 500kb. Ha 97 ambiti.

Modifica: se eseguo il test del sito Web senza utilizzare l'angolare sul tablet, il tempo di caricamento è di 2,5 s (come ho indicato sopra con angolare era più di 18 secondi). Sono disposto a pagare per una soluzione.

Aggiungo anche timeline data che ho eseguito il debug (sul tablet). Puoi controllare una cronologia su Chrome. Apri la console per sviluppatori (F12). Fai clic sulla scheda Cronologia. Fare clic con il tasto destro su questa scheda e quindi selezionare Carica dati cronologia.

Modifica 2: sto usando angular-material e penso che questo potrebbe causare il problema e questo potrebbe tutti quelli di analisi html perché ci sono per esempio molti pulsanti.

+0

Nota che le chiamate parseHTML sono parte del ciclo di vita angolare. Quanto spesso stai usando ng-repeat? – user2977636

+0

c'è solo un ng-repeat ed era vuoto (0 articoli) quando stavo facendo quel test (di solito ha circa 5 elementi) – dontHaveName

+0

@dontHaveName Penso che se qualcuno non ha superato lo stesso problema è difficile aiutarti senza vedere qualche codice reale. –

risposta

1

Non hai postare il tuo codice, ma al di sotto dei produttori di lenti:

  • Troppi rimborsi, ridipinge, parseHTML
  • sporco lento controllando
  • Troppi operazioni DOM

In breve soluzioni di seguito:

  • Uso direttive con i modelli in linea
  • Usa $ templateCache
  • memoria Riutilizzo invece di allocare nuova memoria
  • utilizzare un minor numero di orologi
  • Defer creazione elemento
  • Prevenire grandi e complessi NG-ripetizioni (applicare impaginazione per esempio)
  • Prevenire più richieste (iniziali) da una pagina

Dove va male?

Utilizzare uno strumento oltre alla barra di sviluppo di Chrome come Batarang per eseguire il debug e il profilo della propria app angularjs. Scaricalo da: https://chrome.google.com/webstore/detail/angularjs-batarang/ighdmehidhipcmcojjgiloacoafjmpfk

Per saperne di più qui: