HTML and CSS Reference
In-Depth Information
Instead of generating spaced platforms, platforms are lined up, and the hero jumps and shoots randomly.
Meanwhile, the loading screen is displayed. None of this is rendered, and the user will see only the loading scene. The
result for this particular game is a silky smooth frame rate right from the start, instead of a rate punctuated by random
slowdowns caused by JavaScript engine optimizations times.
As you can see, the warm-up phase depends on your game. Creating a special level to be used only for that
purpose may be an easy way to move the compilation time up front.
Benchmarking
There's no direct way of knowing when the browser JavaScript engine is done optimizing a function, and although
using a warm-up phase is good, warming up longer than necessary makes the user wait longer than is desirable.
The only way to get a hint from your code about what's going on is to measure the execution time of your loop,
like so:
var t = window.performance.now();
function tick() {
requestAnimationFrame( tick );
var n = window.performance.now(),
raf_delta = n - t,
current_fps = 1000 / raf_delta;
t = n;
// read input, move things, render them
game.step()
// use
step_duration
to guess if the game code has been optimized
var step_duration = window.performance.now() - t;
}
As you can see, the time it takes the loop to execute
step_duration
decreases and stabilizes after a while. By
benchmarking your loop on various devices, you'll get a good sense of the minimum execution time your loop should
target to be to be considered good enough to exit the warm-up phase. However, keep in mind that you cannot assume
a fixed number of iterations for your code to be optimized, as the heuristics used are nondeterministic and vary from
browser to browser.
Now, it's up to you to use your benchmark data to decide the best course of action for your game. For instance,
you could employ a dynamic solution that uses average execution times on the fly, or a short, special level that runs
for a fixed number of frames, and check the elapsed time to determine if your code has been optimized by reaching a
target execution time.
Digging Deeper
To get a glimpse of what's happening behind the scenes, you can run Chrome or Chromium with flags to print out
when functions are optimized, as follows:
chrome.exe --no-sandbox --js-flags="--trace-opt --trace-deopt" -user-data-dir=<empty dir path>
