Pipeline job log page uses too much CPU for loading animation
Summary
Job log page uses excessive amounts of CPU to animate the blinking dots at the bottom of the log.
Steps to reproduce
- Open up a task manager (browser built-in or system)
- Load a pipeline job page that is currently running
- Ensure the blinking dots are in view
- Observe high CPU usage
Example Project
https://gitlab.com/gitlab-org/gitlab-ce
What is the current bug behavior?
CPU usage can vary between ~20-40%.
What is the expected correct behavior?
Should use minimal amount of CPU to do animations. Especially when the page is just polling with no other activity.
Relevant logs and/or screenshots
Possible fixes
The issue is with .build-loader-animation
, and having to animate box-shadow
to simulate the other dots pulsing.
To test quickly, just disable the animation: blinking-dots 1s linear infinite;
and note that the CPU usage significantly decreases.
There's a couple options here. I've created CodePens if you're curious about benchmarking them yourself:
- As is, we will average roughly ~20% CPU usage, and spike every so often. This is probably exacerbated due to the heavy DOM of the pipeline log page.
- Force GPU rendering, which will halve the CPU usage to ~10%, via
transform: translateZ(0);
- Re-do the animation by having one element per dot, and animate using the
opacity
property, this will use ~1-3% CPU.
- Use an animated GIF, likely to have the lowest CPU usage, if any.
I think option 3 is the MVC way to go, and if we want to optimize further, we can look into using a GIF.
Thoughts?