1
\$\begingroup\$

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.

|improve this question
\$\endgroup\$
  • \$\begingroup\$ Where were you implementing scaling? Was it on individual image elements, or on the entire game to scale it? \$\endgroup\$ – Katana314 Jun 14 '13 at 20:29
  • \$\begingroup\$ Since most Greensock effects ditch IE8 support anyway, why not just use canvas? \$\endgroup\$ – aaaaaaaaaaaa Jun 16 '13 at 10:04
  • \$\begingroup\$ I am scaling the main div element, and dimensions of all the other elements depend on it. I do not care about cross browser support for this game and as far as i know DOM performence is better than canvas. \$\endgroup\$ – pablopablo89 Jun 17 '13 at 7:33
  • \$\begingroup\$ @pablopablo89 Scaling all the images with their own styling might produce different performance results. But ultimately you will probably have to do your own benchmarks. While the browser feature sets have grown pretty solid over the last few years the behind the scenes implementation of the features are still very much in development. How Chrome performs under specific uses of scaling could change over night. \$\endgroup\$ – aaaaaaaaaaaa Jun 17 '13 at 18:40
  • \$\begingroup\$ @eBusiness Since image scaling is a timecomsuming task, most likely not only chrome will experience this issue. However I can't think of a method on how to cache those scaled images. \$\endgroup\$ – Christoph Jun 18 '13 at 7:47
0
\$\begingroup\$

Since many browsers have now support from the graphics card when doing 3d stuff, a common technique to improve performance is to not use the 2d method but it's 3d counterpart instead. So instead of

scale(x,y)

you should use

scale3d(x,y,0)

Perhaps there is also a method to cache those scaled images, but I am not aware of how to do that. Nonetheless, using the 3d method might already solve your problem.

|improve this answer
\$\endgroup\$
  • \$\begingroup\$ Thank you for the clue. I implemented scaling using 3d scaling, and according too my investigation it is now boosted with GPU. Unfortunatelly it is still not fluent. About 95% of painting event is now "Image Decode (PNG)" . I am using sprite sheets minimized it with TinyPNG. \$\endgroup\$ – pablopablo89 Jun 18 '13 at 9:00
  • \$\begingroup\$ has there been an improvement altogether? Spritesheets tend to be huge and the browser always has to scale the whole imagesprite, so perhaps you could try to just get the plain uncompressed pngs and i guess this brings an additional performance boost. \$\endgroup\$ – Christoph Jun 18 '13 at 12:04
  • \$\begingroup\$ thank you. the trick was to use hardware acceleration with good drivers and avoid using spritesheets. \$\endgroup\$ – pablopablo89 Jun 24 '13 at 8:39
-1
\$\begingroup\$

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:

Image Resize(non-cached) 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.

|improve this answer
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.