In the dim and distant past it was perfectly acceptable to access a remote database via a monochrome screen that displayed
data and allowed editing via plain text fields.
Now there are pressures on web applications to "look modern" and be "more interactive". This usually results in increased processing demands
on the client browser to support dynamic styling and page updates - a simple mouse gesture could go from generating hundreds of javascript calls
to tens of thousands.
"Jack of all trades" 3rd party code or code generators will often produce inefficient code as it is not targetted for
a specific purpose.
While a script is running, the browser is effectively frozen and if individual DOM elements are being manipulated, the entire page needs
to be re-rendered.
Any script that is part of an interactive process should ideally not take more than 300msec to complete, or the end-user will notice the delay.
The Console panel in the Firebug extension for Firefox allows you to profile JavaScript code. The JSLint tool included in the YSlow Firebug plug-in will verify JavaScript against common errors.
Profile and error-check your scripts.
Check any 3rd party or dynamically generated code and trim it to just what's essential.
Cache a DOM element as a variable prior to performing a set of manipulations.
To avoid unnecessary reflows, make a DOM element invisible (or remove it) before performing a set of manipulations and visible again afterwards.
Modify an element's InnerHTML string rather than using DOM methods for element updates.
Avoiding Globals.
Smart event handlers.
Avoid other processor-intensive operations, such as CSS Expressions.
Time performance on a low-powered machine with the most inefficient JavaScript engine you can find (i.e. any version of IE).
JavaScript performance.
Efficient JavaScript
JavaScript Code Conventions
JavaScript loop timings
Lead me not into eval()
