DHTML Lab - dhtmlab.com - Smooth animation using DHTML | 10
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 version | Run #1 | Run #2 | Run #3 | Run #4 | Run #5 |
|---|
| Netscape Communicator 4.7 | 80740 | 80690 | 80850 | 80740 | 80790 |
| Netscape Communicator 4.61 | 80740 | 80850 | 80630 | 80630 | 80680 |
| Microsoft Internet Explorer 4 (Compatibility mode) | 78650 | 78490 | 78430 | 78660 | 78980 |
| Microsoft Internet Explorer 5 | 80310 | 80300 | 80300 | 80520 | 80350 |
Delay set to 10ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.7 | 82660 | 82440 | 82610 |
| Netscape Communicator 4.61 | 82670 | 82390 | 82610 |
| Microsoft Internet Explorer 4 (Compatibility mode) | 81460 | 80970 | 81180 |
| Microsoft Internet Explorer 5 | 82330 | 82330 | 82390 |
Delay set to 40ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.7 | 82720 | 82660 | 82660 |
| Netscape Communicator 4.61 | 82610 | 82770 | 82670 |
| Microsoft Internet Explorer 4 (Compatibility mode) | 82830 | 82610 | 82500 |
| Microsoft Internet Explorer 5 | 82500 | 82490 | 82560 |
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 version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.6 | 50097 | 49935 | 49945 |
| Microsoft Internet Explorer 4.5 | 32079 | 30513 | 30477 |
Delay set to 10ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.6 | 49932 | 49892 | 49919 |
| Microsoft Internet Explorer 4.5 | 36787 | 36219 | 36264 |
Delay set to 40ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.6 | 100005 | 99887 | 99882 |
| Microsoft Internet Explorer 4.5 | 81453 | 81529 | 81314 |
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 version | Run #1 | Run #2 | Run #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 version | Run #1 (1ms) | Run #2 (25ms) | Run #3 (40ms) |
|---|
| Netscape Communicator 4.6 | 25241 | 37607 | 60000 |
| Microsoft Internet Explorer 4.5 | 30302 | 38207 | 60513 |
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 version | Run #1 | Run #2 | Run #3 |
|---|
| Mozilla Milestone 10 | 83000 | 83000 | 83000 |
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 version | Run #1 | Run #2 | Run #3 | Run #4 | Run #5 |
|---|
| Netscape Communicator 4.7 | 300 | 301 | 310 | 301 | 310 |
| Microsoft Internet Explorer 5 | 1021 | 941 | 1021 | | |
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 version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.7 | 15051 | 15052 | 15061 |
| Microsoft Internet Explorer 5 | 15032 | 15032 | 15032 |
Delay set to 10ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.7 | 15051 | 15061 | 15052 |
| Microsoft Internet Explorer 5 | 15041 | 15031 | 15032 |
Delay set to 40ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.7 | 60126 | 60127 | 60127 |
| Microsoft Internet Explorer 5 | 60126 | 60136 | 60126 |
setTimeout()
Delay set to 1ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.7 | 15042 | 15061 | 15051 |
|---|
| Microsoft Internet Explorer 5 | 15031 | 15022 | 15022 |
|---|
Delay set to 10ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.7 | 15052 | 15042 | 15052 |
| Microsoft Internet Explorer 5 | 15042 | 15022 | 15022 |
Delay set to 40ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.7 | 60177 | 60177 | 60177 |
| Microsoft Internet Explorer 5 | 60097 | 60086 | 60087 |
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 version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.7 | 210 | 215 | 221 |
setInterval()
Delay set to 1ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.7 | 1667 | 1504 | 1507 |
Delay set to 10ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.7 | 15038 | 15035 | 15034 |
Delay set to 40ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.7 | 60122 | 60121 | 60127 |
setTimeout()
Delay set to 1ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.7 | 9361 | 9376 | 9366 |
Delay set to 10ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.7 | 25037 | 25021 | 25021 |
Delay set to 40ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.7 | 75090 | 75083 | 75090 |
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 version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.61 | 270 | 280 | 270 |
setInterval()
Delay set to 1ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.61 | 82660 | 82610 | 82610 |
Delay set to 10ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.61 | 82610 | 82670 | 82670 |
Delay set to 40ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.61 | 82660 | 82670 | 82660 |
setTimeout()
Delay set to 1ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.61 | 82560 | 82550 | 82550 |
Delay set to 10ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.61 | 82610 | 82550 | 82550 |
Delay set to 40ms
| Browser and version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Communicator 4.61 | 82660 | 82660 | 82660 |
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 version | Run #1 | Run #2 | Run #3 |
|---|
| Netscape Navigator 4.08, P2/350 | 13840 | 13730 | 13740 |
| Netscape Communicator 4.5, P2/350 | 13900 | 13740 | 13740 |
| Netscape Communicator 4.61, P2/350 | 13780 | 13680 | 13790 |
| Netscape Navigator 4.61 (Linux) | 2866 | 2834 | 2827 |
| Microsoft Internet Explorer 4 (Compatibility mode), P2/350 | 14060 | 13680 | 13730 |
| Microsoft Internet Explorer 5, P2/350 | 13780 | 13730 | 13670 |
| Netscape Communicator 4.5 (P133) | 13780 | 13840 | 13790 |
| Microsoft Internet Explorer 5 (P133) | 14550 | 14830 | 14660 |
| Netscape Communicator 4.6, MacOS 8.5, G3/266 | 4135 | 4125 | 4170 |
| Microsoft Internet Explorer 4.5, MacOS 8.5, G3/266 | 2843 | 2930 | 2918 |
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: https://www.webreference.com/dhtml/column28/results.html
Find a programming school near you