Builds on ideas from Jef Raskin's The Humane Interface.
The first stage is to exploring ways to implement zooming interfaces efficiently in a cross browser manner (link is not very exciting -just three boxes that fade away, but tests efficiency and cross-browser support). Many of the javascript toolkits implement animation but not efficiently, hence the reason for doing this first.
Animation Effects
Zooming interfaces require heavy use of animation effects (fx). As a lot of fx can quickly slow a browser to a crawl, the first step is to put together an efficient handler. Instead of lots of events going off at any time, it uses a time line so all fx are sync'ed to a single repeatative event without flooding the browser with other events. To add further efficiency, calculated transitions are cached so future fx can use them, removing redundant processing.
Lazy Function Definition Pattern
Further speed ups are achieved by using lazy instantiation/ Lazy Function Definition pattern. jQuery 1.2.6 and Dojo 1.1.1 as well as many other libraries do feature detection on every add event, etc. to enable cross browser support. This adds needless overhead. The code here for adding an event or getting a background color, etc, only does feature detection once for a particular function and only if the function is actually called. This is a really useful strength of javascript. For example, initially addevent is coded to do feature detection, and then replaces itself with a new function specifically for the browser it is running in.
Minimising Expensive Rendering
Rendering can also be expensive. To minimise this, when a transition step has been calculated, its resultant value is compared to the previous transition step result. If the values are the same (due to rounding precision) then a null is inserted for the current step and no rendering updates are executed for that particular transition step.
Progressive Enhancement
The style link markup layout is based in Jon Hicks recent presentation for including CSS, neatly
simplifying multi-browser support. Also implemented are ideas from Steve Souders Yahoo!s performance
chief, now at Google – CSS at the top, minified javascript at the bottom. Pretty much all this js does is call
other unobtrusive js after the DOM has loaded without waiting for images to complete downloading.
It also enables the developer to set variables in the ct.config namespace and specify any other resources to
download that are specific to the current page.
Further ideas:
- Implement 'wall clock' timing rather than intervals.
- Modify cache to keep only the most frequent transitions without this extra functionality being more expensive than recalculating for each transition.
- Create more transitions.
- Add movement.
- Find out if rounded corners can be done on IE with data: urls
- Reduce js engine and dom/css object models messaging
- May be use DojoToolkit's gfx extension as it supports cross-broswer graphics.