Jump to content


Why does the CPU load and how do I transfer the load to the GPU?

Recommended Posts

Hello. I am animating, but I am observing a high load on the CPU.

The essence of animation is as follows: when you hover over a block, the main image should approach and when you move the mouse on this block, the image should also move.



video: https://yadi.sk/i/XfepvkILc7_0oA



1. Why is the CPU loaded? After all, as I understood, at animation the CPU should not be loaded.
2. Hint, is it possible somehow to optimize this animation to reduce the load a little bit and increase the smoothness?

Link to comment
Share on other sites

Hey qqignatqq, thanks for the minimal demo.


The main issue here is just the event listeners - I'm pretty sure they cause the CPU to work some no matter what you do in it. I get ~6% CPU load on your demo but ~3% with absolutely nothing going on: https://jsfiddle.net/0k9xzboc/


But there are some super minor things that you could do to slightly improve things:

  • Apply will-change: transform; to each element whose transform is going to be changed.
  • Use xPercent and yPercent instead of x: "n%" and the same for y in GSAP. Probably can't tell the difference but it would prevent some parsing from happening.
  • Get your offsets outside of the event listeners. This is because they can cause more work as well, so getting them once and referring to the stored values saves some CPU work. If your elements are responsive you should updated your saved values on resize if they change.

With those changes I get ~5% so a slight improvement https://jsfiddle.net/v01e839r/

Link to comment
Share on other sites

6%? What?

Wait, you have 6% where it shows? In Task Manager?  Or the Perfomance monitor in your browser?

If you have 6%, I would venture to assume that you just have intel i9-9900KS.




will-change: transform;

Yeah, I tried to use that. It didn't help.



xPercent and yPercent

I tried, but it didn't help, but thank you for that, because I didn't know about xyPercent before.



Get your offsets outside of the event listeners...

I'm not allowed outside. I have 20 of those blocks on my website. Only if you prescribe a separate animation for each block, but I don't think it'll help much. How can "this" load the CPU so much?


Link to comment
Share on other sites

  • Shrug ¯\_(ツ)_/¯ changed the title to Why does the CPU load and how do I transfer the load to the GPU?

I'd definitely avoid calling this.offsetWidth and this.offsetHeight every time the mouse moves. That can force the browser to recalculate things. You should be able to just save those into variables outside your function, and reference them inside your function. 


Also, mousemove events can fire much more frequently than the screen actually refreshes (requestAnimationFrame), so you could reduce the workload by throttling those. Maybe avoid jQuery too (though that's probably not your main issue). I don't have time to rewrite your code right now, but let us know if you need more help. 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.