Prestazioni Javascript: come verificare cosa rallenta la pagina?

Question

Ho una pagina che è molto lenta, non in caricamento, ma in termini di reattività della digitazione nei campi del modulo nella pagina.

Non c'è nessun ajax sulla pagina - questo non ha nulla a che fare con il trasporto di rete.

Quali sono buoni strumenti o strategie per scoprire dove sono i colli di bottiglia del codice? Non ho trovato nulla negli strumenti di sviluppo di Chrome per dirmi dove sono i colli di bottiglia.

Answer 1

Mi sembra che tu abbia qualche evento attivato per ogni pressione di un tasto sul tuo campo di immissione. Le cose che si possono fare:

1. Se profiler di Chrome non si adatta alle tue esigenze, cercare FireBug o IE9 di profiler che è abbastanza decente. In IE9 puoi vedere quanto tempo di CPU è stato speso per ogni chiamata di funzione.
2. Rimuovere temporaneamente i gestori dai campi, uno per uno, e osservare eventuali cambiamenti nel rendimento.

Fammi sapere come va!

Answer 2

Webkit ha un'opzione 'profilo'. Apri gli strumenti per sviluppatori (ctrl + maiusc + i) e fai clic su "Profili". Da lì puoi vedere un pulsante di registrazione (il cerchio) in basso. Fare clic e utilizzare la pagina come faresti normalmente. Fare di nuovo clic per interrompere e ispezionare le scadenze per le chiamate di funzione!

In alternativa si può funzioni di benchmark che utilizzano singolarmente:

console.time("Some label"); 
console.timeEnd("Some label"); 

Answer 3

utilizzare firebug per questi scopi. Include un profiler.

Answer 4

A tal fine ho creato UX Profiler. Tiene traccia e raggruppa tutti gli eventi che si verificano a seguito di qualche azione dell'utente (clic, pressione del tasto ecc.) E misura le loro prestazioni. Quindi è facile capire dove si trova il collo di bottiglia.