How To Implement Renderer With Respect To Cpu Capabilities

I was wondering what is the best way to implement a renderer in JavaScript. It's not the content part of the rendering that's really important here - I would rather like to hear wh

Solution 1:

There's a feature that is made specifically for animation, called window.requestAnimationFrame. This means that the browsers chooses when to call your animation function instead of you hardcoding intervals. Lots of benefits from using it:

• Faster computers will get higher frame rates
• Windows/tabs that aren't visible are updated much less often
• Varying frame rate depending on CPU usage

This article explains how to use it in a cross browser fashion: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

The article also links to http://jsfiddle.net/paul/XQpzU/2/

Solution 2:

You could time how long a frame render takes, and adjust frame spacing to achieve an acceptable load. E.g., if your current frame took 5ms to render, and you want 50% load, wait 5ms before the next frame. You'll want to put some sanity checks on it, and also probably use times from the last several frames.

Solution 3:

Look into trying the while(true) loop inside of a web worker thread. This should prevent the browser from locking up. Note that you can't directly manipulate a <canvas> or any other part of the DOM from within the worker thread.

https://developer.mozilla.org/En/Using_web_workers

Solution 4:

"setInterval() will pass the number of milliseconds late the callback was called" -- https://developer.mozilla.org/en/window.setInterval

You could use this to dynamically adjust your interval time.

N.B. MDC docs are for Javascript as implemented by Mozilla, not ECMA Script or other implementations. You should check if this works in other browsers.