Buggy animation in Atlassian BitBucket is losing half a CPU core always – The HFT Man
I used to be working some benchmarks the opposite day. I often have a number of issues working (Groups, Chrome, IDE, and so forth…) however I’ve to shut every thing to run some tight benchmarks.
When I’m carried out, one of many first issues I open once more is Chrome and that’s once I realized, why does CPU utilization goes up and the fan begins spinning as quickly as I open Chrome? It ought to keep at zero. Chrome is extraordinarily sources hungry when there are numerous heavy pages opened however I don’t have many tabs opened.
The one tab I’ve opened and set as my house web page is BitBucket. Coincidence?????
Lengthy story brief, there’s a buggy animation within the BitBucket internet UI that’s losing half a CPU core always when there’s a construct in progress. The difficulty is with the “construct in progress” icon animation.
The icon is a static SVG picture that’s about 3 traces of textual content.
The icon is rotated by a CSS animation.
.build-status-icon.build-in-progress-icon {
animation-name: rotate-animation;
animation-play-state: working;
animation-iteration-count: infinite;
animation-duration: 1.5s;
animation-delay: 0s;
animation-timing-function: linear;
transform-origin: heart;
}
The CSS animation has horrible efficiency traits.
You possibly can open Chrome monitoring instruments with Shift+Escape.
- When the animation is working, each time a construct is in progress, chrome exhibits the tab is utilizing 30% to 70% of a CPU and the GPU is spinning close to 90%.
- When eradicating the animation (tip: take away the css or set standing to “paused”), the CPU sits close to 0% and the GPU close to 0%.
- The CPU spikes often, the web page is polling the server periodically to replace PR and construct standing. That half is regular.
Numbers on a laptop computer, you possibly can get a 3rd of that in case you have higher {hardware} than me (tip: use a desktop). I’d like to say that is an previous CPU working on a low frequency in energy saving mode, however not fairly, that is the most costly laptop computer within the producer line up with the most costly CPU obtainable, the laptop computer can’t scale down frequency due to BitBucket and Slack requesting and losing an excessive amount of energy, the laptop computer can’t actually scale up frequency due to overheating.
That’s to conclude: dangerous software program working on dangerous {hardware}.
In case you are curious for extra
That’s all for at present except you’re curious for extra particulars. Personally, I used to be undoubtedly curious how a seemingly trivial animation might be so gradual?
The Chrome efficiency instruments have a timeline displaying the time to render every body. Goal is 60 body per second, or 16 ms per body.
- The timeline exhibits 6 ms to render when the animation is working.
- The timeline exhibits only one ms or 2 ms to render when the animation is eliminated.
The pc is doing much more work and recomputing the format of the complete web page. One factor I don’t perceive although is why Chrome is displaying full GPU utilization? The place does GPU utilization go to?
One factor that’s outstanding, the icon is displaying a circle, however the icon picture can be a sq. with clear corners (inside a div container that may be a rectangle).
A circle might be rotated in place. It doesn’t take extra space than the preliminary circle. A sq. can’t.
Did I say the “construct in progress” circle is just not a circle? The circle is a sq.! It’s a sq.!
Rotating a sq. can’t be carried out in place. Let me give one fast image as an example.
Hopefully that’s ok to clarify {that a} sq. image is getting out of bounds because it rotates. On this primary instance, the desk doesn’t resize to suit the rotated picture and the picture overlaps on different content material.
In an actual world app that’s responsive and extremely dynamic, like BitBucket, the web page is often adjusted to suit content material, neighboring components get pushed out to suit the rotating picture, then neighboring and fogeys components get adjusted too… the format of the complete web page is redone on each body due to the rotating picture.
You possibly can see for your self in case you have the software program. You possibly can spotlight components (like within the screenshot above) with the developer instruments and it is possible for you to to see invisible containers getting resized in actual time. I feel that’s what the CPU is busy doing more often than not.