Denne artikel er skrevet af Peter Davidsen, http://beddet.dk, beddet@beddet.dk, http://twitter.com/beddet.

Det her er anden artikel i en serie omkring funktionaliteten i Internet Explorer 8, mere specifik i Developer Toolbar som man kan komme ind i ved at trykke på F12 som er standard genvejstast.

Efterhånden bliver javascript mere og mere udbredt i takt med at der bliver udviklet mere brugervenlige sider. Ofte bliver sider som indeholder meget klient kode, nemmere og rarere at bruge for de fleste brugere og da man kan mindske antallet af side kald bliver siden hurtigere. Især for brugeren da der ikke skal opdateres hver enkelt menu-item, banner, reklame osv. bare for at udfylde en formular, poste til serveren og så finde ud af at man mangler at udfylde et enkelt felt for derefter at blive sendt tilbage til siden og skulle hente hele siden igen. Brugeren for en bedre oplevelse og serveren bliver ikke belastet så meget da der bliver færre kald til serveren, noget af arbejdet bliver lagt over på klienten.

Ved hjælp af Dev Toolbar har man mulighed, som udvikler, for at profile ens hjemmeside og se hvordan ens javascript opfører sig for at optimere koden for at mindske størrelsen af de renderede sider. Det kan være hvor hurtig og hvor mange gange en side kalder en funktion, hvis en funktion bliver kaldt mange gange og virker til at være lidt langsommere end andre kan det være at den skal flyttes eller skrives om.

Det var så den lidt kedelige og måske langtrukne introduktion, så nu må vi hellere komme videre med det lidt sjovere. Show me the code ! Desværre kommer der faktisk intet kode, men mere om hvordan profiling virker i dev toolbar. For det meste så vil jeg bruge ekstrabladet.dk og newz.dk til at vise mine eksempler med i nogle af artiklerne i denne serie da der er lidt mere kød på de sider.

For at profile skal man bare trykke på Start Profiling , loade ens side og så bare klikke rundt på siden, trykke på diverse knapper, links, holde musen over de forskellige steder osv for at teste ens script kald.

Under Profiler har man 2 muligheder for ens oversigt, enten Call Tree eller Functions.

Man kan se at siden kalder 3 forskellige funktioner, og hvor mange gange hver funktion bliver kaldt og hvor lang tid kaldene tager. Det kan være meget rart at vide hvor mange gange de forskellige funktioner bliver kaldt på en side, fx onclick som er en meget anvendt funktion, som dog ikke siger ret meget om hvad de gør da onclick, mouseover, mouseout, onfocus osv bare kalder andre funktioner. De lidt mere sigende funktioner. doStuff og showStuff er lidt sjovere da de nok gør noget med siden. Men hvordan de bliver kaldt ved vi ikke noget om endnu. Siden i baggrunden er en meget simpel side med et link på som har en onclick og den funktion den kalder skriver så noget tekst ud. Før man klikker på linket er det bare en tom side.

Lad os klikke over på Call Tree fanen som siger lidt mere om hvad der egentligt sker.

Nu har vi lige pludselig fået et tree view, før man gør noget så har man bare en linie hvor der står onclick som bliver kaldt en gang, det er jo også rigtigt, men vi kan klikke ind videre og se om onclick kalder nogle funktioner. Det gør den, kalder showStuff en gang som endda videre kalder en 3. funktion som jeg har kaldt doStuff som der bliver kaldt 3 gange. På denne måde har man et meget bedre overblik over de kald ens side laver og hvordan de hænger sammen. På min simple side er det lidt ligegyldigt, men lige så snart man kommer op og måske kalder onclick 50 gange forskellige steder så bliver det et kaos. Jeg har udvidet min side lidt og trykket på de links der er flere gange.

Den øverste og det nederste link kalder en funktion jeg har lavet hvorimod det miderste blot kalder noget javascript som ikke er lagt i en separat funktion.

Under 2 af mine kald har jeg haft fejl i min kode og jeg får en TypeError smidt i hovedet, jeg kan også se at de kald tager længere tid. På denne måde kan jeg meget let profile mit kode, især hvis jeg har rigtig mange funktioner som bliver kaldt i hinanden på kryds og tværs. Man får også rækkefølgen fra toppen af og nedefter, så det første kald står øverst.

De 3 funktioner jeg har lavet kan ses her og html koden der hører til, altså der hvor jeg kalder mine onclick events.

function showStuff() {

document.getElementById('label').style.display = 'block';

doStuff();

doStuff();

doStuff(); 

}

function doStuff() {

var string = "";

for(var i = 0; i < 5; i++) { string += "Hello World <br />"; }

document.getElementById('1').innerHTML = string;

}

function color() { document.bgColor = '#bebebe'; }

<a href="#" onClick="showStuff();">Klik på mig :-D</a><br />

<a href="#" onClick="alert('hej');">Klik på mig :-D</a><br />

<a href="#" onClick="color();";>Klik på mig :-D</a><br />

<span id="label" style="display: none;">

En masse 'hemmelig' tekst.

</span>

<br />

<span id="1"> </span>

De 2 spans indeholder tekst, det “hemmelige” tekst bliver synligt når man klikker på linket. Link nummer 2 laver en popup som skriver ”hej”.

showStuff() kalder doStuff() 3 gange, det er der ingen grund til da de overskriver hinanden, det kunne have været noget copy-paste der gik galt da man skrev koden og så aldrig fik det fjernet igen. Men ved at profile siden kan vi se at funktionen bliver kaldt 3 gange og ved at se på koden er det nemt at se at det er forkert og derved kan man optimere ens side lidt. Lige her er det ligegyldigt, men når man får større sider som skal kaldes mange gange i minuttet så begynder det hurtigt at belaste serveren og klienten mere.