3

After having received a template from a contracted agency, we've found that the parallax scrolling feature they've implemented is using anywhere from 50 - 100% of cpu. This can be seen in Activity Monitor (osx) which shows a spike in CPU usage when the page is scrolled.

I've been tasked with identifying what - if anything (outside of removing the feature) - we can do to reduce the cpu usage or at least what is causing it. Since we know it is the scrolling, it would be nice if we could figure out more specifically what about the scrolling was causing the spike.

I checked out common causes for high cpu usage but came away feeling very confused. I'm also looking at the timeline in Chrome DevTools, but don't really know how to decipher what I'm seeing. Is there a way for me to get more information about what is causing the CPU usage without being a hardware person?

I'm about to dig into JavaScript Memory Profiling and JavaScript Profiling With The Chrome Developer Tools, but thought I would consult the SO hive mind since it is chock full of juicy wisdom.

Thanks for the help.

Community
  • 1
  • 1
Jackrabbitrocks
  • 63
  • 1
  • 7
  • 1
    Those features tend to take a ton of CPU, and there isn't a whole lot that you can do to avoid this. Kudos for actually caring! Most folks don't, leading to a bad user experience for those of us on slow computers. – Brad Dec 02 '13 at 22:04
  • How are you performing this effect? With manual javascript? With some jquery plugin? With css transitions? css animations? css tranforms? Some of these are vastly more effecient than others, sometimes for no particularly good reason. – Alexis Beingessner Dec 02 '13 at 22:14
  • Thats the new way of outsourcing everything to the users, sadly – Honsa Stunna Jul 03 '22 at 03:17

0 Answers0