JavaScript performance warmup

问题

I'm creating a WebGL game and it's really much faster after some time using it. Every time I run it for the first time it's slow and stutters. Would running some CPU intensive code for few seconds first prepare browser to use it's full power?

I'm already running ammo.js in a worker which gives an enormous boost, but first few minutes of playing are still much slower. Could this be my laptop strategy to manage power?

回答1:

I can think of 4 things:

The browsers use a technique called JIT (Just In Time compilation) to accelerate the speed of execution for the most-used parts of your code. However, to detect which part is most used, browsers give it some time.
Laptops usually run the CPU at a lower speed to preserve battery. However, when the CPU usage is too high (like when you're playing a game), they step up the frequency to get more juice from the processor. For example Intel Speedstep http://en.wikipedia.org/wiki/SpeedStep
Some laptops have two graphic cards (many Macbook Pros for example). One is the default Intel one that they use for rendering normal GUI windows and the other that is used for graphically intensive applications. The more powerful graphic card is usually turned off by default and only used when needed (because it consumes more battery and also system heat will go up and system will be noisy). Though it's unlikely that the system will change graphic cards in the middle of running a 3D application.
These are all out of your control. The game engines usually use lookup tables for frequently computed values in order to accelerate their run time. It might be possible that your game engine fills the lookup table on demand.

Nevertheless none of these items should take "a couple of minutes" to get up to speed. Usually it takes just a few seconds. So it's still fishy.

回答2:

I doubt there is anything you could do but ... you could use each WebGL shader program at least once and draw each buffer once and that might help. See Alex's answer for reasons why it might not.

WebGL has lots of validation to do. Much of that validating happens lazily. One example is anytime you draw using gl.drawElements it has to check that none of your indices are out of range. It does that and caches the answer for the specific range of the index buffer you just used. If you don't update the indices then it won't have to check again. But that means the first time you draw each thing with gl.drawElements there's an extra check so you could try drawing everything once before you start your game.

Similar things happen with GLSL programs so using each program once might help initialize/cache those as well.

Note: I doubt this will fix things but it might be worth a try.