Ottimizzazione delle prestazioni di un'applicazione a eliminazione diretta - Linee guida per migliorare i tempi di risposta

Question

Ho una pagina ampia e complessa che fa molto affidamento su knockout.js. Le prestazioni stanno iniziando a diventare un problema, ma esaminare lo stack delle chiamate e cercare di trovare i colli di bottiglia è una vera sfida.

ho notato in un'altra domanda (Knockout.js -- understanding foreach and with) che la risposta accettata è il commento:

... e io non suggerisco di usare with in cui è necessaria ad alte prestazioni a causa dell'overhead ...

Supponendo che la dichiarazione sia vera, questa è una cosa davvero utile da conoscere e non ho trovato una fonte per tali suggerimenti sulle prestazioni.

Pertanto, la mia domanda è:

Esistono linee guida generali/migliori consigli che posso applicare per aiutare le prestazioni della mia candidatura prima di arrivare in profondità nel classico ottimizzazione delle prestazioni.

Answer 1

Penso che sarebbe troppo per il layout dei suggerimenti che ho in mente in una risposta.

Ho iniziato una serie di post di blog su questo argomento. Il primo post è here.

Questo post descrive un po 'come funziona if/with (copia gli elementi secondari come modello e re-rendering utilizzando il modello ogni volta che viene attivato l'associazione) e spiega come questi binding possono causare il re-rendering molto più spesso del previsto.

Aggiornerò questa risposta con i post futuri.

Answer 2

Uno dei più grandi grattacapi che ho trovato (e non si vede discusso altrove) è che Knockout rivaluta ogni vincolante su un elemento ogni volta che qualsiasi vincolante per l'elemento cambia.

Questo di solito non è un grosso problema, ma per i collegamenti che tendono ad essere costosi (ad esempio template), può creare problemi di prestazioni significativi.

Fissare associazioni che il rendering del contenuto/bambini (template, foreach, ecc) per un elemento virtuale (utilizzando l'containerless control flow syntax) se non sono l'unico vincolante per l'elemento.

Answer 3

Penso mappatura può aiutare anche voi potete seguire questa prova e vedere la differenza tra l'utilizzo jquert mappa, mappa knockout knockout-map-vs-jquery-map

Quando si inizia a utilizzare la mappatura pesantemente ObservableArrays diventano cruciali