anime: Large memory leaks.
Describe the bug
Hey! Been using anime in A-Frame, an open source WebVR framework. Love it. Though there is a lot of memory leak that can lead to GC pauses.
Taken from a few seconds from the anime homepage, it’s allocated hundreds of kilobytes of memory garbage.
This issue can be alleviated for free with these practices:
- Cache regexes (https://github.com/juliangarnier/anime/blob/master/src/index.js#L69 https://github.com/juliangarnier/anime/blob/master/src/index.js#L358) rather than allocating new one each call
- Use for loops rather than
Array.forEachwhich allocates an entire function (https://github.com/juliangarnier/anime/blob/master/src/index.js#L779) - Try to avoid array helpers such as
Array.mapandArray.filterandArray.reduceandObject.keysas these will allocate a new array (https://github.com/juliangarnier/anime/blob/master/src/index.js#L1209 https://github.com/juliangarnier/anime/blob/master/src/index.js#L321). - Avoid allocating arrays in critical codepaths, reusing a helper / auxiliary array when possible. A single array can be reused by clearing the length
array.length = 0;(https://github.com/juliangarnier/anime/blob/master/src/index.js#L959 https://github.com/juliangarnier/anime/blob/master/src/index.js#L308) - Try to avoid cloning objects (https://github.com/juliangarnier/anime/blob/master/src/index.js#L337)
This is something I could try to help out with.
To Reproduce Steps to reproduce the behavior:
- Go to anime homepage (or any anime animation).
- Open devtools memory / performance.
- Record memory.
Expected behavior Little memory garbage / allocations.
Desktop (please complete the following information):
- OS: macOS
- Browser firefox
About this issue
- Original URL
- State: open
- Created 5 years ago
- Reactions: 21
- Comments: 17 (9 by maintainers)
I believe this issue should be constrained to memory leaks versus unit testing, linting, and Typescript.
Alright, I’m going to focus on this for 3.1. I created a branch called memory plumbing, any help on this is welcome! Thanks !
Would be a separate issue, but we have unit tests for animations for A-Frame on top of anime (https://github.com/aframevr/aframe/blob/master/tests/components/animation.test.js#L4), and for most of A-Frame which is a VR library (also visual).
We test many things, that animation configs are parsed and set up properly, test that if we
tickan animation past its duration that it reaches its end value, if wetickan animation mid-way that the values are between thefromandto, test that animation callbacks are called, that the animation reverses withalternateorreverse, etc.@mubaidr Of course, I’m open to any suggestions on this subject. Thanks!
@mubaidr eslint + prettier sounds like a good idea. Regarding tests, I’m not really sure where to start to be honest. Is it really possible to properly automate testing on an animation library since a lot of the tests rely on visual results? Do you have any testing library recommendation?
@ItsJonQ Totally, eslint + prettier setup would be nice!
@juliangarnier Can
youwe please also add, some lint configuration to make sure all contributions share same style/practices. (eslint + prettier?) Easier for code reviews, issue identifications.and What about tests? Would it be suitable to add tests?