Share
Când lucrați la cod JavaScript avansat, cum ar fi un motor 3D, vă puteți întreba ce puteți face pentru a optimiza și cât timp trebuie să vă petreceți în anumite piese specifice de cod. În acest tutorial, voi împărtăși mai multe instrumente care vă oferă o perspectivă asupra modului în care codul dvs. funcționează și vă va arăta cum puteți profita la maxim de notele utilizatorilor din graficul de memorie pentru a vă analiza performanța.
Nu puteți aștepta să vedeți ce este vorba despre acest tutorial? Urmăriți acest videoclip:
Simțiți-vă liber să vă ping pe Twitter (@deltakosh) dacă doriți să discutați acest articol!
Un profiler care vine în minte este profilul integrat pe care îl puteți găsi utilizând noile actualizări ale îmbunătățirilor Internet Explorer F12 Dev Tools - care vor fi de asemenea disponibile pentru Microsoft Edge. Desigur, puteți folosi orice alte instrumente similare pe care le preferați prea în cutia dvs. dev.
Dacă doriți să încercați acest lucru pe Android, iOS sau Mac OS, puteți utiliza, de asemenea, remote.IE pentru a obține o instanță de previzualizare tehnică Windows 10 care rulează în câteva minute. Apoi, deschideți Internet Explorer "e" pe care l-ați evitat (este un shell temporar client care a configurat noul motor de redare a proiectului Spartan), a lovit F12 și acum puteți vedea ce vă voi arăta:
Rețineți că, odată cu noile instrumente F12 pe care le-am livrat împreună cu previzualizarea Windows 10, profiler face parte din fereastra de reacție a UI:
Să vedem alte opțiuni care vă pot oferi mai multe informații despre performanța codului dvs..
Trebuie doar să sunați console.time () și console.timeEnd () în jurul codului pe care doriți să îl evaluați. Rezultatul este un șir din consola dvs. care afișează timpul scurs între timp și timeEnd.
Acest lucru este destul de simplu și poate fi ușor de simulat, dar am găsit această funcție cu adevărat simplă de utilizat.
Chiar mai interesant, puteți specifica un șir pentru a obține o etichetă pentru măsurarea dvs..
Aceasta este, de exemplu, ceea ce am făcut pentru Babylon.js:
Accentsconagua
console.time ("Evaluarea meshurilor active"); this._evaluateActiveMeshes (); console.timeEnd ("Evaluarea meshurilor active");Acest tip de cod poate fi găsit în jurul tuturor funcțiilor majore și apoi, atunci când este activată logarea performanțelor, puteți obține informații foarte bune:
Fi avertizat că redarea textului în consola poate consuma energie CPU.
Chiar dacă această funcție nu este per se o funcție standard, compatibilitatea browser-ului este destul de mare. Chrome, Firefox, IE, Opera și Safari îl suportă.
Dacă doriți ceva mai vizibil, puteți utiliza și obiectul de performanță. Printre alte caracteristici interesante care vă ajută să măsurați performanța unei pagini web, puteți găsi o funcție numită marcă care poate emite o marcă de utilizator.
O marcă de utilizator este asocierea unui nume cu o valoare de timp. Puteți măsura porțiuni de cod cu acest API pentru a obține valori precise. Puteți găsi un articol extraordinar despre acest API și de Aurelio de Rosa pe SitePoint.
Ideea de astăzi este să folosiți acest API pentru a vizualiza anumite note de utilizator pe ecranul de reactivitate a UI:
Acest instrument vă permite să capturați o sesiune și să analizați modul în care CPU-ul este utilizat:
Apoi, putem mări un anumit cadru selectând o intrare numită Răsfoirea cadrului de animație și faceți clic dreapta pe el pentru a selecta filtrați la eveniment.
Cadrul selectat va fi filtrat apoi:
Datorită noului instrument F12, puteți trece la stivele de apeluri JavaScript pentru a obține mai multe detalii despre ceea ce sa întâmplat în timpul acestui eveniment:
Principala problemă aici este că nu este ușor să afli cum codul este expediat în timpul evenimentului.
Și aici intră marca jocului. Putem adăuga pe cont propriu markerii și apoi să puteți descompune un cadru și să vedeți ce caracteristică este mai scumpă și așa mai departe.
performance.mark ("Începeți ceva ... doar acum!");Mai mult, atunci când creați propriul cadru, este foarte util pentru a vă putea instrumenta codul măsurători:
performance.mark ("Evaluarea meshurilor active - Începeți"); this._evaluateActiveMeshes (); performance.mark ("Evaluarea mesh-urilor active-End"); performance.measure ("Evaluarea meshurilor active", "Evaluarea meshurilor active - Începeți", "Evaluarea meshurilor active-End");Să vedem ce puteți obține cu Babylon.js, de exemplu, cu „V8“ scenă:
Puteți solicita Babylon.js să emită mărci de utilizator și măsuri pentru dvs. prin utilizarea strat debug:
Apoi, folosind analizorul de reacție UI, puteți obține acest ecran:
Puteți observa că mărcile utilizatorilor sunt afișate în partea de sus a evenimentului în sine (triunghiurile portocalii), precum și segmente pentru fiecare măsură:
Este foarte ușor să se determine că, de exemplu, fazele [Render targets] și [Main render] sunt cele mai scumpe.
Codul complet folosit de Babylon.jspentru a permite utilizatorilor să măsoare performanța diferitelor caracteristici este următoarea:
Tools._StartUserMark = funcția (numeNumăr, condiție) if (condiție typeof === "undefined") condition = true; dacă (! condiție ||! Tools._performance.mark) return; Tools._performance.mark (contraName + "-Begin"); ; Tools._EndUserMark = funcție (counterName, condiție) if (condiție typeof === "undefined") condition = true; dacă (! condiție ||! Tools._performance.mark) return; Tools._performance.mark (numãr counter + "-End"); Tools._performance.measure (numeNumăr counterName + "-Begin", counterName + "-End"); ; Tools._StartPerformanceConsole = funcție (counterName, condition) if (condiție typeof === "undefined") condition = true; dacă (condiția!) return; Tools._StartUserMark (numitor, condiție); dacă (console.time) console.time (counterName); ; Tools._EndPerformanceConsole = funcție (counterName, condition) if (condiție typeof === "undefined") condition = true; dacă (condiția!) return; Tools._EndUserMark (numărare, condiție); dacă (console.time) console.timeEnd (counterName); ;
Datorită instrumentelor F12 și mărcilor de utilizatori, puteți obține acum un tablou de bord excelent despre modul în care diferite părți ale codului dvs. lucrează împreună.
S-ar putea să vă surprindă puțin, dar Microsoft are o grămadă de învățare gratuită pe multe subiecte JavaScript open source și suntem în misiunea de a crea mult mai mult cu Microsoft Edge. Check out-ul meu:
Sau seria de învățare a echipei noastre:
Și câteva instrumente gratuite: Visual Studio Community, Azure Trial și instrumente de testare cross-browser pentru Mac, Linux sau Windows.
Acest articol face parte din seriile de tehnologie web dev din Microsoft. Suntem încântați să împărtășim Microsoft Edge și noul EdgeHTML motor de randare cu tine. Obțineți mașini virtuale gratuite sau testați de la distanță pe dispozitivele Mac, iOS, Android sau Windows @ http://dev.modern.ie/.
