How to optimise CPU usage

[delizade]

Hi,

long age as  a Flash Dev one of the biggest problem was performance and CPU usage.

for recent days as I try to explore jqury and GSAP I realised that this issue still active.

 

as far as remember, the heaviest animatic materials were opacity animations or scales. Today after a few animations that contains fadein-out and some transform animations I had to research about GSAP tricks about performance.

 

is there any page about this specific content? or is there any experiences of your to share?

 

thank you.

[Carl]

The good news is that GSAP does significant performance optimizations under the hood such as converting 2D transforms to matrix3d during the animation and avoiding layout thrashing. Layout thrashing happens when there are multiple, alternating read > write > read > write operations on the DOM. GSAP will make sure all the writes happen after all the reads. 

 

There aren't too many silver-bullet solutions that are going to solve all problems or work the same across all hardware. There are probably enough good ideas out there to write a short novel, but it would be hard to cover all those things in a thread like this.

 

You will probably see the worst performance on opacity changes on many large things (just like in Flash). GSAP is highly optimized though to execute  thousands of property changes per update but the bottleneck will always be the browser's ability to render those changes. If you need to animate a ton of things at once, it will be best to use GSAP with your canvas library of choice. 

 

Here is a great demo from Blake that exhibits some blazing speed using GSAP and Pixi.js

 

See the Pen vNwRdO by osublake (@osublake) on CodePen

 

[OSUblake]

Can you make a demo showing the performance problem?

 

Alpha and scale are slow to do on the CPU, but they are usually done on the GPU now, along with other transforms (x, y, rotation, skew). But if you are changing something else, like say the background color, then the texture running on the GPU is no longer current, and must destroyed. The browser now has to generate a new raster or whatever you were animating, and upload it back onto the GPU. This can be a huge bottleneck. 

 

And canvas is definitely the way to go if you don't like dealing with performance issues. Check out the performance timeline of the animation @Carl linked to above. This is with several thousand animations running, and as you can see, there is a whole lot of NOTHING going on.

 

 

GSAP is doing most of the work, but it's idle most of the time. There's enough time in between frames for GSAP to take a nap. Pixi is doing even less work. It's just sending the changes made by GSAP to the GPU, which is where the magic happens. Once on the GPU, there are special math functions that run on the hardware as electrons, rendering stuff at the speed of light!

 

[boynet]

the internet is full of js\browser performance tips and guide.

 

the best thing you should know that will help you get started is f12>performance tab.

 

rule of thumb is you want to get 60fps so you have 16ms for each frame, if anything take longer start to explore why