Speeding Up Frame Rates For DHTML Animation in Win98 - DHTML Lab | 3 | WebReference

Speeding Up Frame Rates For DHTML Animation in Win98 - DHTML Lab | 3

Logo

Speeding Up Frame Rates For DHTML Animation in Win98
A Case Study



Animation In DHTML

When you want to make Web page elements move across the screen using DHTML, you can execute a timed loop that:

A script of 200 loops to move page elements could look like this: 
function runIt() {
    for (i=0;i<200;i++) moveIt();
}

Many readers may already know what this technique of animation will look like. If you're unfamiliar with it, then see for yourself and make note of the difference in the way it turns out on NN and IE.

NN displays many of the intermediate image positions between start and finish but IE doesn't display any of them.

IE actually does move the image but this happens "behind the scenes" and only the first and last positions are displayed. The reason for this is that whenever a script is evaluated, the IE parsing agent takes over, interprets the script first, and then only after the script terminates does the display get updated [2]. In this case, the last position gets the display update when the for() loop finishes and an exit occurs from the executing outermost function, runIt().

Suppose that this wasn't the situation and Explorer acted like Navigator. This script would still have problems. For instance, the for() loop method has no easy control over the speed of animation and the loop runs as fast as the browser will let it. This is a problem for the computer monitor that can't update as fast as the loop runs and misses some changes in position between updates. Moreover, as long as the for() loop is executing, the browser is locked out from capturing other events or executing other script. This loop virtually gains control over the browser by allowing no time gaps for these other things to happen until it finishes. To avoid all these problems in animation two JavaScript methods are used that thread script execution.


Produced by Mark Szlazak and

All Rights Reserved. Legal Notices.
Created: July 11, 2000
Revised: July 11, 2000

URL: https://www.webreference.com/dhtml/column34/3.html