Javascript how to create an allocation free animation loop to avoid garbage collector? Javascript how to create an allocation free animation loop to avoid garbage collector? google-chrome google-chrome

Javascript how to create an allocation free animation loop to avoid garbage collector?


I'm not actually certain, but I seem to remember that web workers have their own garbage collectors, and so the GC hit wouldn't affect FPS in the main thread (though it would still affect updates' ability to be sent to the main thread)


I'm no expert, but from what I've been reading. I too came across the same bug report that you mentioned in your comments:

As suggested, allocating the Number object on each call, would tally with garbage being collected.

https://bugs.chromium.org/p/chromium/issues/detail?id=120186#c20

It also suggested that simply having the debugger open recording the stack traces could cause problems. I wonder if this is the same case when doing remote debugging?

This answer suggests flip flopping between animation frames, to reduce the garbage collection: https://stackoverflow.com/a/23129638/141022

Judging by the depth of question you have asked, I'm sure what I'mabout to say is obvious to you, but it might be interest to refocus towardsyour goal in general (albeit perhaps doesn't help with yourinteresting observation of Chrome).

One thing we need to remember is that we're not aiming to avoidgarbage collection completely as it's so fundamental to JS. Instead we arelooking to reduce it as much as possible to fit into rendering ourframes with 16ms (to get 60fps).

One of VelocityJs's approaches is to have a single global "tick" that handles all animation...

Timers are created when setInterval(), setTimeout(), and requestAnimationFrame() are used. There are two performance issues with timer creation: 1) too many timers firing at once reduces frame rates due to the browser’s overhead of maintaining them, and 2) improperly marking the time at which your animation begins results in dropped frames.

Velocity’s solution to the first problem is maintaining a single global tick loop that cycles through all active Velocity animations at once. Individual timers are not created for each Velocity animation. In short, Velocity prioritizes scheduling over interruption.

http://www.sitepoint.com/incredibly-fast-ui-animation-using-velocity-js/

This along with general practices on reducing garbage collection such as creating a recycling cache to reuse objects or even rewriting methods such as array slice to avoid garbage.

https://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript