Tijdens het werken aan een timer functie voor een spelletje in JavaScript, viel het me op dat Internet Explorer opvallende afwijkende snelheden laat zien.
Om dit verder te onderzoeken heb ik een aantal metingen verricht en de resultaten hiervan vind je in dit artikel.
Beschrijving experiment
Voor dit onderzoek maakte ik gebruik van een zelfgeschreven JavaScript Timer script, wat gebruik maakt van de standaard setTimeout functie.
Na het starten van dit script wordt elke 0,1 seconde een streepje op het scherm geplaatst. Dit script stopt na 200 streepjes en meet dan de eindtijd. In theorie zou dit script precies 20 seconden moeten duren.
Om dit te toetsen heb ik zowel thuis als op mijn werkplek ongeveer 90 tests gedaan met de drie gangbare browsers voor Windows: Internet Explorer (7 en 8), Firefox (3.6 en 4.0) en Google Chrome (11.0).
De resultaten
20 seconden
Voor het testen van een scriptduur van 20 seconden verrichte ik 9 metingen per browser. Elke browser zou er in theorie precies 20 seconden over moeten doen. In deze grafiek zie je per browser en meting de afwijking van die 20 seconden in milliseconden (verticale as):
In deze grafiek is te zien dat Internet Explorer (zowel 7 als 8 ) aanzienlijk meer tijd nodig heeft om het script te voltooien, en dat deze afwijking opvallend constant lijkt te zijn. Bij elke meting bleek IE precies 1765 of 1766 milliseconden meer tijd nodig te hebben. Firefox en Chrome lieten nauwelijks afwijkingen zien en kwamen, op een enkele uitschieter na, niet boven een afwijking van 30 milliseconden.
10 seconden
Bij het testen van dit script met een duur van 10 seconden (100 streepjes) zagen de afwijkingen van de 5 verrichte metingen er zo uit:
Ook bij deze metingen bleek Internet Explorer veruit de traagste van de drie browsers. En ook ditmaal was deze afwijking constant: 828 milliseconden.
Daarnaast is het opvallend dat bij deze test FF en Chrome een negatieve afwijking lieten zien: Met andere woorden, ze deden er minder dan 10 seconden over om het script te voltooien. Deze afwijkingen bleef onder de 50 milliseconden.
40 seconden
Om te zien of Internet Explorer bij een grotere scriptduur nog trager werd, liet ik het script 40 seconden draaien (400 streepjes) en dat leidde tot deze afwijkingen:
Bij deze twee metingen per browser is Internet Explorer weer de traagste en constant (43640 i.p.v. de gewenste 40000 milliseconden). De afwijkingen in FF en Chrome bleef beperkt tot maximaal 150 milliseconden.
80 seconden
Bij een kleine test (2 keer per browser) voor een scriptduur van 80000 milliseconden had Internet Explorer 87391 nodig. Dat is een afwijking van meer dan 7 seconden(!). FF en Chrome liepen daarbij maximaal 0,5 seconde vertraging op.
Afwijkingen
Het samenvoegen van deze metingen levert dit plaatje op:
Alle browsers laten een lineair verband in afwijkingen zien: Hoe langer het script duurt, hoe meer de tijd afwijkt van de gewenste tijd. Daarbij is Internet Explorer veruit de traagste van de drie.
Deze vertragingen zien er per seconde zo uit:
Hieruit blijkt voor alle browsers dat de afwijking per seconde langzaam toeneemt bij een langere duur van het script, maar dat deze toename niet constant is. De groei in afwijking per seconde neemt af bij een langere duur van het script.
Conclusie
Uit dit onderzoek blijkt dat het gebruik van een timer m.b.v. setTimeout in JavaScript in alle browsers tot afwijkingen leidt. Internet Explorer is hierbij opvallend langzaam en heeft aanzienlijk meer tijd nodig voor het uitvoeren van het test script dan Firefox of Chrome, die vergelijkbare afwijkingen laten zien.
Het gebruik van Internet Explorer in webapplicaties die gebruik maken van de setTimeout functie in JavaScript, zoals spelletjes, kan dus nadelig zijn, omdat deze browser trager is. Het ligt hierbij voor de hand om dan Firefox of Chrome te gebruiken.
p.s. 1: In de toekomst kan dit onderzoek worden uitgebreid door ook Safari en Opera te onderzoeken, alsmede nieuwe browserversies (zoals IE 9).
p.s. 2: Je kan dit JavaScript Timer script ook op je eigen browser naar keuze testen (voor de duur van 20 sec).