I am working on a game developed on DOM using Crafty JS framework, and Greensock GSAP JS (http://www.greensock.com/gsap-js/) for animations. It is my first time working with these technologies.
I have a problem with FPS going down to 15 and less while animations are performed on bigger DOM elements. After investigating the issue with Chrome Developer Tools Timeline I discovered that 80% of bottleneck events time are:
Image Resize(non-cached)
I assume it is caused by the fact that I am using
CSS Transform scale()
for the game to adjust to browser size. Performance is acceptable once the scaling is disabled.
Is there any way to cache the resized images in browser to improve performance? The game will only be used on a local computer.
Any help and advice will be greatly appreciated.