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 am have a problem with FPS going down to 15 and less when animations are performed on bigger DOM elements. After investigating issue with Chrome Developer Tools Timeline I discovered that 80% of bottleneck events time are:
I assume it is caused by the fact that I am using
CSS Transform scale()
for game to adjust to browser size. After disabling scaling performance is acceptable.
Is there any way to cache the resized images in browser to improve performance ? Game will be only used on local computer.
Any help and advice will be greatly appreciated.