Animatsiooniline veebiarendus: Jõudlus #2.3 – Konsooliga töötamine

Animatsiooniline veebiarendus: Jõudlus #2.3 – Konsooliga töötamine

Tänases jõudluse osas võtame ette, kuidas ära kasutada konsooli jõudluse mõõtmiseks.

Õpetus on mõlemale brauserile (Firefoxile ja Chromiumile) ühine, kuid konsooli funktsiooni ilmuvad “Perforamnce” tööriista (rääkides siinkohal console.time() ja console.timeStamp() funktsioonidest) natukene erinevalt (Chromiumil “Console” põhipaneeli alamlehel ja Firefoxil nii kolmandas paneelis kui ka “Waterfall” vahelehel).

console.time()

Otseselt tegelikult console.time() funktsioonid (nende all mõtlen console.time() ja console.timeEnd()) ei kasuta/vaja jõudlusemõõtjat.

Nimelt on antud funktsioonide ülesanne tegelikult üsnagi lihtne – mõõta, kui kaua läheb mingil tegevusel aega.

Näiteks for silmusel jne.

Kui sa ei kasuta jõudlusemõõtjat, siis prindivad praegu käsitletavad funktsioonid lihtsalt andmed konsooli.

“Performance” tööriist lihtsalt aitab neid andmeid paremini visualiseerida.

console.time(“Sinu_Protsess”)

console.time("Sinu_Protsess") funktsioonil on kohustuslikuks parameetriks sõne, mille võid vabalt välja mõelda.

Nimelt peaks see parameeter esindama analüüsitavat toimingut.

Näiteks, kui tahad teada, kui kaua läheb for loop‘il aega, siis võiks console.time() parameetriks olla “forLoop”, “sorting-algorithm” vms.

console.time() funktsiooniga saad alustada taimerit, mis lubab sul teada saada, kui kaua läheb mingil tegevusel aega.

console.timeEnd(“Sinu_Protsess”)

console.timeEnd() toimib täpselt vastupidiselt console.time() funktsioonile – console.timeEnd() lõpetab antud taimeri.

Õigemini need funktsioonid peaksid käima käsi käes.

Nagu aru saad, siis console.time() alustab taimeriga ning console.timeEnd() lõpetab sama taimeri.

Jällegi antud funktsiooni parameetriks võib olla ükskõik, mis sõne, kuid see ei tohiks erineda tema paarilise parameetrist ehk kui console.time() argumendiks oli näiteks “forLoop”, siis console.timeEnd() parameetriks peab ka olema sõne “forLoop”.

Nii teab brauser ajamõõtmist lõpetada.

Reaalne kasutus

Tegelikkuses ei ole see midagi keerulist, pigem väga lihtne – tuleb lihtsalt analüüsitava tegevuse ette (lähtekoodis) panna console.time() funktsioon (koos parameetriga) ning pärast analüüsitavat tegevust console.timeEnd() sama argumendiga.

Ja ongi kõik. Nii saad teada, kas konsoolist või jõudluse lindistusest, kui kaua läheb antud tegeuvsel aega.

Näide:

console.time("forLoop");
for(var i = 0; i < array.length; i++){
    //For loop toimingud
}
console.timeEnd("forLoop");

console.timeStamp()

Seda funktsiooni on võimalik ainult reaalset näha jõudluse lindistuses.

Seega soovitaksin sul teha mingi näide valmis, kus kasutad näiteks for silmust.

Kui midagi välja ei mõtle, siis võid kasutada minu näidet:

var startButton = document.getElementById("start-button");
var loopLength = 5000;

startButton.onclick = function(){
	encrypt(loopLength);
};

function encrypt(length){
	var encryptedPasswords = [];

	console.time("encrypting");
	for(var i = 0; i !== length; i++){
		if(i % 100 === 0){
			console.timeStamp(i.toString());
		}
		
		encryptedPasswords[i] = CryptoJS.AES.encrypt((Math.random()*Math.random()).toString(), "Secret Passphrase");
	}
	console.timeEnd("encrypting");

	printEncryptedPasswords(encryptedPasswords);
}

function printEncryptedPasswords(encryptedPasswords){
	console.log(encryptedPasswords);
}

startButton on lihtsalt nupp/element HTMLis, mille ID on “start-button” ja mille peale klikates toimub krüptimine.

NB! Kasuta seda näidet omal vastutusel, sest krüptimine nõuab brauserilt palju tööd. Muuda loopLength variable‘i vastavalt sinu arvutile.

Lisa HTML sellele näitele ning anna mingile elemendile (soovitavalt nupule) ID’eks “start-button”.

Ava antud HTML soovitud brauseris ning alusta uue lindistusega.

Vajuta seotud elemendile ning oota kuni 10-15 sekundit ja pärast seda lõpeta lindistus.

Nüüd peaks sul vajalikud andmed olemas olema.

Chromium tüüpi brauserites on console.timeStamp() märgid otse teise paneeli all (need väikesed kollased kastid) ning Firefoxil on seda funktsiooni võimalik nii näha “Waterfall” lehel kui ka kolmandal paneelil siniste väikeste kastidena (kolmandal paneelil ainult siis kui võtad console.time() funktsioonid lähtekoodist välja).

Nagu näha võid, siis console.timeStamp() ei ole midagi erilist – see lihtsalt annab sulle lisainformatsiooni, millal midagi toimus.

Praegu olen ma näiteks teinud nõnda, et konsool lisab iga uue sajanda silmuse tsükli korral “Performance” tööriista märkme.

See tuleb kasuks just siis, kui teatud toiming võib aeglustada/kiireneda.

Näiteks, kui alguses on märkmed kaugel üksteisest, kuid pärast üksteisele ligi (ehk iga sajas või X tsükkel on alguses üksteisest kaugel, kuid hiljem lähedamal), siis võib oletada, et mingi teine protsess tõmbab brauseri jõudlust alguse poole maha.

Rohkem console.timeStamp() ei teegi.

console.timeStamp("Sinu_märge") funktsioonil on ka mitte kohustuslikuks parameetriks sõne, millega saab märkmed ära identifitseerida (põhimõtteliselt sama asi, mis console.time() funktsioonide argument).

console.profile() ja console.profileEnd()

Konsooliga saab tegelikult ka lindistust alustada.

Selleks ongi meil console.profile() ja console.profileEnd().

Nagu arvata võib, siis console.profile() alustab lindistusega ja console.profileEnd() lõpetab lindistuse.

Jällegi on nende mõlemal mitte kohustuslikuks parameetriks sõne, mis siis tähistab lindistuse nime (peab olema sama mõlemas funktsioonis).

Nõnda ei pea pidevalt manuaalselt lindistusi tegema.

Tegemist on veel nii-öelda mitte standard funktsioonidega ehk need ei pruugi töötada väga hästi kõigis Chromium ja Firefox brauserite versioonides.


Ongi konsooli osa jõudluse kohapealt läbivõetud. Kui küsimusi tekkis, siis anna julgelt kommenteerides teada! 🙂


Senikaua ole tugev ja kohtume juba järgmistes postitustes,

Tähelepanu eest tänades – Oliver Paljak

P.S! Kui oled huvitatud animatsioonilisest veebilehest, siis võta minuga julgelt ühendust AnsiVeebi kodulehel.
Ma ei pea ennast praegu animatsioonilise veebiarenduse eksperdiks, kuid olen sellele spetsialiseerunud ja saan Sind väga palju aidata animatsioonilise veebilehe loomisel!

Leave a Reply

Your email address will not be published. Required fields are marked *