Share
Quando lavori su un codice JavaScript avanzato, come un motore 3D, puoi chiederti cosa puoi fare per ottimizzare e quanto tempo dovresti spendere in alcuni pezzi di codice specifici. In questo tutorial condividerò diversi strumenti che forniscono informazioni sul rendimento del tuo codice e ti mostrerò come sfruttare al massimo i voti degli utenti nel grafico della memoria per analizzare le tue prestazioni.
Non vedo l'ora di vedere di cosa tratta questo tutorial? Guarda questo video:
Sentiti libero di darmi un ping su Twitter (@deltakosh) se vuoi discutere questo articolo!
Un profiler che viene in mente è il profiler integrato che puoi trovare usando i nuovi aggiornamenti agli strumenti Dev di Internet Explorer F12, miglioramenti che saranno disponibili anche per Microsoft Edge. Ovviamente, puoi usare tutti gli strumenti simili che preferisci anche sul tuo box di sviluppo.
Se vuoi provarlo su Android, iOS o Mac OS, puoi anche utilizzare remote.IE per ottenere un'istanza dell'anteprima tecnica di Windows 10 in esecuzione in pochi minuti. Quindi apri Internet Explorer "e" che stai evitando (è una shell client temporanea con il nuovo motore di rendering di Project Spartan configurato), colpito F12 e ora puoi vedere cosa ti mostrerò:
Si noti che con i nuovi strumenti F12 che abbiamo fornito con l'anteprima tecnica di Windows 10, il profiler ora fa parte della finestra di risposta dell'interfaccia utente:
Vediamo altre opzioni che possono darti maggiori informazioni sul rendimento del tuo codice.
Devi solo chiamare console.time () e console.timeEnd () attorno al pezzo di codice che vuoi valutare. Il risultato è una stringa nella console che mostra il tempo trascorso tra tempo e timeEnd.
Questo è piuttosto semplice e può essere facilmente emulato, ma ho trovato questa funzione davvero semplice da usare.
Ancora più interessante, puoi specificare una stringa per ottenere un'etichetta per la tua misurazione.
Questo è, ad esempio, quello che ho fatto per Babylon.js:
Accentsconagua
console.time ("Valutazione delle mesh attive"); this._evaluateActiveMeshes (); console.timeEnd ("Valutazione delle mesh attive");Questo tipo di codice può essere trovato attorno a tutte le principali funzionalità e quindi, quando la registrazione delle prestazioni è abilitata, è possibile ottenere informazioni davvero interessanti:
Tieni presente che il rendering del testo nella console può consumare energia della CPU.
Anche se questa funzione non è di per sé una funzione standard, la compatibilità del browser è piuttosto grande. Chrome, Firefox, IE, Opera e Safari lo supportano.
Se vuoi qualcosa di più visivo, puoi usare anche l'oggetto performance. Tra le altre caratteristiche interessanti che ti aiutano a misurare le prestazioni di una pagina web, puoi trovare una funzione chiamata marchio che può emettere un marchio utente.
Un segno utente è l'associazione di un nome con un valore temporale. Puoi misurare porzioni di codice con questa API per ottenere valori precisi. Puoi trovare anche un ottimo articolo su questa API di Aurelio de Rosa su SitePoint.
L'idea oggi è quella di utilizzare questa API per visualizzare segni utente specifici nella schermata di UI Responsiveness:
Questo strumento ti permette di catturare una sessione e analizzare come viene utilizzata la CPU:
Possiamo quindi ingrandire un frame specifico selezionando una voce chiamata Callback frame di animazione e facendo clic con il tasto destro su di esso per selezionare filtra per evento.
Il frame selezionato verrà filtrato quindi:
Grazie al nuovo strumento F12, puoi quindi passare a stack di chiamate JavaScript per ottenere maggiori dettagli su ciò che è accaduto durante questo evento:
Il problema principale qui è che non è facile capire come viene inviato il codice durante l'evento.
Ed è qui che i marchi utente entrano nel gioco. Possiamo aggiungere il nostro marcatori e quindi essere in grado di scomporre una cornice e vedere quale caratteristica è la più costosa e così via.
performance.mark ("Inizia qualcosa ... solo ora!");Inoltre, quando crei il tuo framework, è super pratico poter essere in grado di strumentare il tuo codice con misurazioni:
performance.mark ("Analisi delle mesh attive: inizio"); this._evaluateActiveMeshes (); performance.mark ("Active meshes evaluation-End"); performance.measure ("Valutazione delle mesh attive", "Analisi delle mesh attive - Inizio", "Analisi delle mesh attive - Fine");Vediamo cosa si può ottenere con Babylon.js, ad esempio, con “V8” scena:
Puoi chiedere a Babylon.js di emettere marchi utente e misure per te usando strato di debug:
Quindi, utilizzando l'analizzatore di risposta UI, è possibile ottenere questa schermata:
Puoi vedere che i marchi utente sono visualizzati in cima all'evento stesso (i triangoli arancioni) e ai segmenti per ogni misura:
È quindi estremamente semplice stabilire che, ad esempio, le fasi [Render targets] e [Main rendering] sono le più costose.
Il codice completo utilizzato da Babylon.jsper consentire agli utenti di misurare le prestazioni di varie funzionalità è la seguente:
Tools._StartUserMark = function (counterName, condition) if (typeof condition === "undefined") condizione = true; if (! condition ||! Tools._performance.mark) return; Tools._performance.mark (counterName + "-Begin"); ; Tools._EndUserMark = function (counterName, condition) if (typeof condition === "undefined") condizione = true; if (! condition ||! Tools._performance.mark) return; Tools._performance.mark (counterName + "-End"); Tools._performance.measure (counterName, counterName + "-Begin", counterName + "-End"); ; Tools._StartPerformanceConsole = function (counterName, condition) if (typeof condition === "undefined") condizione = true; if (! condition) return; Tools._StartUserMark (counterName, condition); if (console.time) console.time (counterName); ; Tools._EndPerformanceConsole = function (counterName, condition) if (typeof condition === "undefined") condizione = true; if (! condition) return; Tools._EndUserMark (counterName, condition); if (console.time) console.timeEnd (counterName); ;
Grazie agli strumenti F12 e ai marchi utente, ora puoi ottenere una grande dashboard su come funzionano insieme diverse parti del tuo codice.
Potrebbe sorprendervi un po ', ma Microsoft ha un sacco di apprendimento gratuito su molti argomenti JavaScript open source, e siamo in missione per creare molto di più con Microsoft Edge in arrivo. Controlla il mio:
Oppure le serie di apprendimento del nostro team:
E alcuni strumenti gratuiti: Visual Studio Community, Azure Trial e strumenti di test cross-browser per Mac, Linux o Windows.
Questo articolo fa parte della serie di web dev tech di Microsoft. Siamo entusiasti di condividere Microsoft Edge e il nuovo Motore di rendering EdgeHTML con te. Ottieni macchine virtuali gratuite o test in remoto sul tuo dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.
