Andy Li's Blog

JavaScript performance is becoming more and more critical since we are all obsessed with developing CPU-hungry stuff like pixastic (manipulate image in JavaScript), Box2D.js (2D physic simulation). Sometime these  computational expensive calculations will block the user from interacting with the UI and freeze the screen. So, some developer start asking for multi-threading in JavaScript.

Multi-threading is a technology that let a program split into several threads and let them run in parallel. For example the visual part including the UI is running in one thread and some other work like zipping a file is run in another thread. In that case the UI will not need to wait for the zipping process and able to respond to user input.

Sadly, this is not implemented in JavaScript (or we should say not implemented in the browsers?). But there are still some developers finding ways to simulate multi-threading. Although the tricks may not really solve the problem completely, but still are very useful to be learned. Here are two of them:

• http://www.sitepoint.com/article/multi-threading-javascript/
• http://www.dojotoolkit.org/book/dojo-book-0-9/part-5-dojox/dojox-timing

And recently, there is a threading library for Flex, which use similar techniques as above to simulate threading.

It is quite popular that websites have more and more “AJAX animation effects”(which should be JavaScript animation effects actually…). Many AJAX learners are obsessed with adding fancy animated effects on there web page, and sometimes, adding it without thinking the particular effect’s meaning, will actually confuse or disturb the end users.

In the following, I will follow script.aculo.us‘s effect naming. You may see the live effects in its wiki.

There are quite a few animation effects that are common, like fade in/out, blind up/down, slide up/down. They can be seen easily over the web and their meanings are obvious: to bring things in or out. But there is still some different among them.

For fade, the transition is much smoother then the others since there is no moving part. It should be applied on things that do not need much attention, like changing top banner’s background image, just let the users focus on what they are reading.

For blinding/sliding, the sense of changing is stronger. One of their special usages is to resize things, like panels. Since resizing panels often leads to change of layout, if there is no transition, the user may not be able to catch up with the movement of the page elements.

Some less popular effects like puff, shake are more easily to be used wrong.

For puff, since the animation ends with zero alpha, some developers may use it as disappearing effect, but that’s wrong. Since Mac OSX is using puff for a visual effect on opening files/programs, many Mac user may be confused if you use it on removing elements.

For shake, some developers may think that it can draw user’s attention effectively. Really, but we should use it carefully since shaking will cause the user not able to see the elements inside the shaking area easily. So, it takes time to let the shake stop and refocus on the element’s details and it may disturb the user’s work.