CODEWITHSUNDEEP
javascriptperformancehtmlcanvas
jason
jason

Reputation: 4801

javascript canvas html5 performance questions

So Im tinkering around making an old school game for fun using the canvas. Firefox is slow, but chrome dosent have firebug, which I find almost a requirement when developing with javascript. So 1st question : how are people developing these complex games without the aid of firebug?

Second question. What are some performance tips that can help the draw functions (or just javascript in general) execute faster? It seems to me that this is the area that is the bottleneck (for firefox at least).

Final question. From experimenting with profiling in firebug, I can see performance gains from what some would call 'bad practices', such as : I have organized code into a list of functions that each do one thing. This runs slower than if I just dump all the code between the beginPath() and closePath(), but doing it that way leads to spaghetti code and is difficult to follow. How do you manage the balance?

Upvotes: 3

Views: 1083

Answers (2)

Skilldrick
Skilldrick

Reputation: 70879

For your final question - there's nothing wrong with optimisation - the only thing that's bad is premature optimisation. If you've found there's a problem and the only way to solve it is to make your code less readable then you have to make a trade-off between readability/maintainability and performance. If performance is the number one factor then by all means turn your beautifully factored code into ugly spaghetti code. But only after you've exhausted the other options.

Upvotes: 3

Simon Sarris
Simon Sarris

Reputation: 63872

I am using 100% Chrome for development and then testing other browsers later.

Chrome has a built in inspector that is (in my opinion) better than firebug. Much easier stack inspection, stepping, and object inspection.

Right click on a page and click "Inspect element." (or press CTRL SHIFT + I)

Then click the "Scripts" tab. You'll see the call stack, scope variables, breakpoints, callstack, etc on the right. Hovering over variables not only lets you see their value but lets you explore their nested values as well.

Upvotes: 4

Related Questions