DHTML and JavaScript Performance Tuning

Using JavaScript

Animation

  1. Use setInterval instead of setTimeout
  2. Use start and end methods for your animations
  3. Use two threads for Microsoft Windows 9x systems

  1. Use setInterval instead of setTimeout

    The difference between setInterval and setTimeout is more significant in Internet Explorer and later versions of Safari than in Mozilla.

    • setInterval with a String VS setTimeout with a String

      Demo ->

      setInterval(s, i) vs. setTimeout(s, i)

      This demo compares setInterval(s, i) to setTimeout(s, i). Variable s is a string of code that is evaluated, and variable i is how much time elapses between executions of s (not how frequently the code is evaluated).

    • setInterval with a String VS setTimeout with a Function Pointer

      Demo ->

      setInterval(s, i) vs. setTimeout(fn, i)

      The performance of setTimeout isn't much better with a function pointer.

      This demo compares setInterval(s, i) to setTimeout(fn, i). Variable fn is a function pointer that is called. The other variables are the same as the previous example.

  2. Use start and end methods for your animations

    Set up your animation loop with a start method to reduce calculations and conditional tests within the loop This is really the same thing as Limit Work Inside Loops.

  3. Use two threads for Microsoft Windows 9x systems

    Demo ->

    Single Threading VS Double Threading

    Double threading can dramatically speed your animations up, especially in IE running on Windows 9x.

    To detect windows 9x, use the following code: 

    var isWin9x = /Win9|Windows 9/.test(navigator.userAgent);

    This demo compares a single thread of setInterval(fn, i) to a double thread of setInterval(fn, i).

    Browser Notes

    Mozilla doesn't seem to handle double threading very well - the animation becomes choppy. Safari also does quite well with doouble threading, but recent versions of Safari don't need it - they have excellent performance anyway.

Next in this tutorial:

 

Tags

Archived Scripts

*AnimTree
*Tabs
*GlideMenus
*DragLib