search

ocamllabs / 2048-tutorial

OCaml tutorial based on the 2048 game
49 stars 12 forks source link

Animation performance in FF and Safari #28

Closed dbuenzli closed 4 years ago

dbuenzli commented 10 years ago

So I investigated a bit. And it seems that the problem is in the canvas rendering performance (i.e. the call to Vgr.render). The numbers are rather astonishing. One thing I don't get is why Safari doesn't call us more often for animating as we are still below the 16ms limit for getting a 60Hz animation.

Here's an example of the render frame timings for a transition in the three browsers:

Chrome

START:
4.244ms; 4.255ms; 2.87ms; 4.163ms; 1.889ms; 2.36ms; 3.311ms; 3.692ms; 1.605ms; 2.658ms; 2.784ms; 2.162ms; 2.258ms; 1.688ms; 1.554ms; 1.951ms; 1.641ms; 1.564ms; 1.242ms;
END : 19 frames @ 63.3333hz

Firefox 

START: 
21.9351ms; 21.316ms; 19.3239ms; 19.8034ms; 23.8123ms; 20.0289ms; 22.8311ms; 21.8929ms; 22.9779ms; 24.0915ms; 21.9377ms; 21.2064ms;
"END : 12 frames @ 40hz

Safari

START:
7.00021ms; 9.00006ms; 16ms; 11.0002ms; 6.99997ms; 7.00021ms; 8.99982ms; 9.99999ms; 11.0002ms; 16ms; 15.0001ms; 9.99999ms; 9.00006ms; 8.00014ms;
END : 14 frames @ 46.6667hz
dbuenzli commented 10 years ago

Just another data point. The cost of an empty requestAnimationFrame callback that simply reschedules itself (doesn't fire Useri's timer and refresh events) varies from 1.4ms to 2ms in Safari while it only takes 0.075ms to 0.1ms in Chrome.