I'm writing an HTML5 canvas visualization. According to the Chrome Developer Tools profiler, 90% of the work is being done in (program), which I assume is the V8 interpreter at work calling functions and switching contexts and whatnot.

Other than logic optimizations (e.g., only redrawing parts of the visualization that have changed), what can I do to optimize the CPU usage of my JavaScript? I'm willing to sacrifice some amount of readability and extensibility for performance. Is there a big list I'm missing because my Google skills suck? I have some ideas but I'm not sure if they're worth it:

Limit function calls

When possible, use arrays instead of objects and properties

Use variables for math operation results as much as possible

Cache common math operations such as Math.PI / 180

Use sin and cos approximation functions instead of Math.sin() and Math.cos()

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
If this question can be reworded to fit the rules in the help center, please edit the question.

Do you perceive your app as being too slow?
–
Šime VidasNov 29 '11 at 1:33

1

voted to close this. There are entire books out there about the topic, what kind of answer do you expect?
–
jAndyNov 29 '11 at 1:37

~~ is not a suitable replacement for Math.abs().
–
RightSaidFredNov 29 '11 at 1:39

1

Performance tuning is ALWAYS about learning how to measure what parts of your code are taking the most time. Trying to apply performance optimizations without knowing exactly which parts of your code are the real bottlenecks is like shooting a basket blindfolded. You might get lucky and find the right shot, but chances are you will just spend a lot of time and not make any progress. You have to find a way to instrument your code and isolate the functions that are taking the most time. Then, and only then, can you intelligently discuss what could be done to speed up those functions.
–
jfriend00Nov 29 '11 at 1:39

If you need to access items in order frequently, copy into a regular array

Style Property:

Minimize changes on style property

Define CSS class with all changes and just change className property

Set cssText on the element directly

Group CSS changes to minimize repaint/reflow

String Matching:

If searching for simple string matches, indexOf should be used instead of regular expression matching wherever possible.

Reduce the number of replace commands you use, and try to optimise into fewer, more efficient replace commands

eval is evil:

The 'eval' method, and related constructs such as 'new Function', are extremely wasteful. They effectively require the browser to create an entirely new scripting environment (just like creating a new web page), import all variables from the current scope, execute the script, collect the garbage, and export the variables back into the original environment. Additionally, the code cannot be cached for optimisation purposes. eval and its relatives should be avoided if at all possible.

Only listen to what you need:

Adding an event listener for the BeforeEvent event is the most wasteful of all, since it causes all possible events to fire, even if they are not needed. In general, this can be several thousand events per second. BeforeEvent should be avoided at all costs, and replaced with the appropriate BeforeEvent.eventtype. Duplicate listeners can usually be replaced with a single listener that provides the functionality of several listener functions.

Timers take too much time:

Because a timer normally has to evaluate the given code in the same way as eval, it is best to have as little code as possible inside the evaluated statement. Instead of writing all of the code inside the timeout statement, put it in a separate function, and call the function from the timeout statement. This allows you to use the direct function reference instead of an evaluated string. As well as removing the inefficiency of eval, this will also help to prevent creating global variables within the evaluated code.