DHTML Lab - dhtmlab.com - Smooth animation using DHTML | 10 | WebReference

DHTML Lab - dhtmlab.com - Smooth animation using DHTML | 10

Logo

Smooth animation using DHTML
test results


First test run

The first test was run on the Windows 98 P3/450. Canvas size for the test was set to 520x362 pixels. All tests were run using setTimeout() to loop the movement.

Delay set to 1ms

Browser and versionRun  #1Run  #2Run  #3Run  #4Run  #5
Netscape Communicator 4.78074080690808508074080790
Netscape Communicator 4.618074080850806308063080680
Microsoft Internet Explorer 4 (Compatibility mode)7865078490784307866078980
Microsoft Internet Explorer 58031080300803008052080350

Delay set to 10ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.7826608244082610
Netscape Communicator 4.61826708239082610
Microsoft Internet Explorer 4 (Compatibility mode)814608097081180
Microsoft Internet Explorer 5823308233082390

Delay set to 40ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.7827208266082660
Netscape Communicator 4.61826108277082670
Microsoft Internet Explorer 4 (Compatibility mode)828308261082500
Microsoft Internet Explorer 5825008249082560

Second test

The second test was run on the Mac G3. Canvas size was again set to 520x362, and again setTimeout() was used to loop the movement.

Delay set to 1ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.6500974993549945
Microsoft Internet Explorer 4.5320793051330477

Delay set to 10ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.6499324989249919
Microsoft Internet Explorer 4.5367873621936264

Delay set to 40ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.61000059988799882
Microsoft Internet Explorer 4.5814538152981314

Third test

The third set was performed on the P3/450 and the Mac G3/266. Instead of the 69x62 pixel image the test used a text layer of approximately the same size. This resulted in a total of 1562 steps on the Mac and 1510/1512 on the PC. This time the test was only run once, to get an approximation of whether using an image or text had anything to do with the results. The delay was set to 1ms.

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.7 (PC)81780
Netscape Communicator 4.61 (PC)81780
Netscape Communicator 4.6 (Mac)52117
Microsoft Internet Explorer 4 (Compatibility mode, PC)78430
Microsoft Internet Explorer 5 (PC)81010
Microsoft Internet Explorer 4.5 (Mac)31232

Fourth test

The fourth test was performed on the Mac G3/266. This time the test again used the 69x62 pixel image. The test was run once for each delay setting. This set used setInterval() instead of setTimeout(). Run #1 has 1ms delay, run #2 has 25ms and run #3 has 40ms.

Browser and versionRun  #1 (1ms)Run  #2 (25ms)Run  #3 (40ms)
Netscape Communicator 4.6252413760760000
Microsoft Internet Explorer 4.5303023820760513

Fifth test

This test was run on the P3/450. Again the 69x62 pixel image was used. The browser used was Mozilla Milestone 10, and the browser window was sized so the canvas had the approximate size of 520x362. The canvas of my Netscape 4.7 was used as a reference. setTimeout() was used for looping, and the delay was set to 1ms. The test was run three times and timed by using my Tissot watch.

Browser and versionRun  #1Run  #2Run  #3
Mozilla Milestone 10830008300083000

Sixth test

The computer used for these tests is the P3/400 running Microsoft Windows NT 4.0. Canvas size was set to 520x362 and the 69x62 pixel image was used.

A total of 14 tests were run on this machine, 7 with each browser. One test of the for()-loop, 3 tests with setInterval() and 3 tests with setTimeout(). For each of those 3 tests the delay is set to 1ms, 10ms and 40ms.

for()-loop

Browser and versionRun  #1Run  #2Run  #3Run  #4Run  #5
Netscape Communicator 4.7300301310301310
Microsoft Internet Explorer 510219411021

myDelay()

Didn't work in Netscape. IE had no visible movement, but "hangs" for 60908, 60477 & 60087 ms.

setInterval()

Delay set to 1ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.7150511505215061
Microsoft Internet Explorer 5150321503215032

Delay set to 10ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.7150511506115052
Microsoft Internet Explorer 5150411503115032

Delay set to 40ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.7601266012760127
Microsoft Internet Explorer 5601266013660126

setTimeout()

Delay set to 1ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.7150421506115051
Microsoft Internet Explorer 5150311502215022

Delay set to 10ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.7150521504215052
Microsoft Internet Explorer 5150421502215022

Delay set to 40ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.7601776017760177
Microsoft Internet Explorer 5600976008660087

Seventh test

These tests were run on the P3/400 running Linux. Browser used was Netscape Communicator 4.7, canvas size set to 520x362, 69x62 pixel image used.

for()-loop

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.7210215221

setInterval()

Delay set to 1ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.7166715041507

Delay set to 10ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.7150381503515034

Delay set to 40ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.7601226012160127

setTimeout()

Delay set to 1ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.7936193769366

Delay set to 10ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.7250372502125021

Delay set to 40ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.7750907508375090

Eight test

These tests were run on my home computer, the P2/350. Browser used was Netscape Communicator 4.61. Canvas size 520x362, 69x62 pixel image. The tests were run to make sure that the tests run on the Mac, NT & Linux machines could be compared to the first PC tests.

for()-loop

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.61270280270

setInterval()

Delay set to 1ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.61826608261082610

Delay set to 10ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.61826108267082670

Delay set to 40ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.61826608267082660

setTimeout()

Delay set to 1ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.61825608255082550

Delay set to 10ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.61826108255082550

Delay set to 40ms

Browser and versionRun  #1Run  #2Run  #3
Netscape Communicator 4.61826608266082660

Ninth test

This test was run on 4 computers. The P2/350, the Pentium 75 running Linux 2.0.38, the Pentium 133 running windows 95, and the Mac G3/266. This test was the setInterval() speed test. Delay is set to 1ms, total number of iterations in the test is 250.

Browser and versionRun  #1Run  #2Run  #3
Netscape Navigator 4.08, P2/350138401373013740
Netscape Communicator 4.5, P2/350139001374013740
Netscape Communicator 4.61, P2/350137801368013790
Netscape Navigator 4.61 (Linux)286628342827
Microsoft Internet Explorer 4 (Compatibility mode), P2/350140601368013730
Microsoft Internet Explorer 5, P2/350137801373013670
Netscape Communicator 4.5 (P133)137801384013790
Microsoft Internet Explorer 5 (P133)145501483014660
Netscape Communicator 4.6, MacOS 8.5, G3/266413541254170
Microsoft Internet Explorer 4.5, MacOS 8.5, G3/266284329302918

Future articles

We've reached the end of this article on DHTML animation. In the future I plan to look closely at more complicated setups, particularly multiple objects and multiple setInterval() threads. I will also see whether Microsoft's HTML+TIME can be used to get better performance under Windows 95. So, stay tuned!


Produced by Morten Wang and

All Rights Reserved. Legal Notices.
Created: Jan 03, 2000
Revised: Jan 03, 2000

URL: http://www.webreference.com/dhtml/column28/results.html