I've looked in to this in the past and I think it's JIT compilation in the Javascript engine. It seems to vary depending on the browser and system. As usual you should test on every browser available to identify issues which are browser-specific. In this case while generally very smooth, sometimes it's a bit janky in Chrome and Firefox. But surprisingly IE11 is rock solid and I basically never see any issues there.
I'd point out this isn't "HTML5's fault", because HTML5 is simply a specification, and it's not like the specification says "browsers must pause for a frame every N frames". It looks like a quirk that Chrome and Firefox are subject to at the moment and I don't think there's any reason it can't be fixed. There's no reason something like this has to be inherent to browser games.
Some random thoughts that I think support the JIT compilation theory:
- we've done loads of work to reduce the garbage created by our engine (specifically to avoid jank like this ), and it's generally very good at recycling stuff and not needing any significant GC work at runtime. Also modern browser GCs are very good at doing work in lots of little slices instead of having to pause everything while it does work. So GC should not be a significant issue.
- Construct 2's engine is pretty big in terms of lines of code, since it has loads of features and does a lot under the hood. JIT compilers compile on-demand for faster startup. They have various thresholds for compilation like "if a function has been called 100 times, compile it". This means they don't have to compile everything, which likely includes lots of code only ever called once. However it does mean random bits of code end up getting compiled mid-gameplay at non-deterministic times. The size of C2's engine would explain why other smaller engines might not be so affected.
- IE11 apparently has a completely parallel JIT compiler, which would explain why it is so smooth: it's compiling functions in the background while the game continues to run, and just quickly swaps in the finished code when it's done. On the other hand I saw a Google engineer mention that V8 sometimes has to compile synchronously (i.e. causing jank, since it has to stop and wait for it).
- WebGL mode moves more of the rendering logic in to JS code. It usually way outperforms the canvas2d renderer, but since more rendering code is in the JS engine, I guess it could be more subject to jank from compiling that code.
- after a while (15-30 seconds?) the JIT compiler should have basically compiled everything. This explains why it might be janky for a bit at the start, and then get smoother. If you are only seeing problems on startup, try allowing the game to run for a while to "warm up" (so everything which is called a lot is already JIT compiled), and then it should be smoother.
However this is solvable: if Chrome and Firefox are as good at parallelising JIT as IE11 is then it should be fine everywhere. Also simply waiting out the warmup period should make it a lot better. Hopefully most games are just showing a menu or intro credits type sequence at that point. I've also heard the V8 team are working on a new compiler called "TurboFan", which I can't find much information about, but parallel compilation would be an obvious improvement to make for a new compiler.
I had already filed bugs with Chrome and Firefox based on sbperftest since it actually measures jank and dropped frames providing an objective way to measure the problem and provide a yardstick to compare improvements. The bugs I filed don't seem to have gotten much attention yet. So comments and stars on these reports could help them get attention:
Chrome issue 387675
Chrome issue 424563 (which I just filed now to point out IE11 does better than Chrome)
Firefox bug 1028893