8 ms·
Buggy animation in Atlassian Bitbucket is wasting half a CPU core at all times
- jxf 3y agoI wonder what the total amount of wasted CPU is for displaying and fetching advertising.
- zerop 3y agoBut why chrome implements CSS Animation in a way that would cost so much CPU?
- Zealotux 3y agoIt’s explained in the article: the image is a square (even though it looks like a circle), rotating a square cannot be done in place, it’ll shift the layout as it rotates, provoking a new paint of the entire page on each animation frame. This is how the author explains it, but it sounds suspicious to me, I’m not sure a CSS animate rotation would cause shifts in that case.
- ioulian 3y agoYou are right, this would not cause layout to recalculate, only repaint. And propably repaint only a section of the screen, not the whole window.
- 542458 3y agoYeah, a CSS rotate is just a visual effect - it doesn’t change the item’s actual box size and therefore doesn’t cause page reflows. I suspect there’s something else happening here. It may be that it’s triggering a repaint of adjacent regions or the entire table.
- paradox460 3y agoSomething running on every animation frame to check if the build is complete maybe?
- deleted 3y ago[deleted]
- temp00112 3y agoI don't think the performance reason is this '''In a real world app that is responsive and highly dynamic, like BitBucket, the page is usually adjusted to fit content, neighboring elements get pushed out to fit the rotating image, then neighboring and parents elements get adjusted too… the layout of the entire page is redone on every frame because of the rotating image.''' transform translations doesn't make the browser recalculate the layout for neighbour elements
- archerx 3y agoShould have used a .gif for the animation :) CSS animations are a resource hog and I avoid having continuously running animations for this reason. For one site I wanted to have a background gradient slowly shift colors over time in an infinite loop but my laptop fan kept spinning on the page and the cpu usage was high so I scraped it.
- artursapek 3y agoI fixed a bug like this in online-go.com once. The "unread notification" bubble had an almost indiscernible infinite animation at 60fps and the website would start killing my Thinkpad every time it was showing. It felt so good to track down and fix it.
- johnvaluk 3y agoCan you describe the fix?
- artursapek 3y agoI just removed the animation lol
- ioulian 3y agoStrange to see this, as the animation should NOT trigger a layout recalculation (transform is done on it's own "layer", is GPU accelerated and that's why it's more performant). The article mentions "The computer is doing a lot more work and recomputing the layout of the entire page.", but it's not true. As you see in his example, the square image is getting rotated but layout of the table does not change (the image clips out the table), so no layout recalculation is done. So the "bug", must be somewhere else?
- h1fra 3y agoThe article is missing the keyframes so it's hard to be sure what's the culprit but for those curious a simple animation like this can consume 12-20% CPU on my computer (chrome v119) https://codepen.io/bodinsamuel/pen/VwgEGyE https://codepen.io/bodinsamuel/pen/VwgEGyE
- ale42 3y agoThis uses ~1% of one CPU core on my PC (but I'm using Firefox, didn't try on Chrome)
- dist-epoch 3y agoThe same animation on the same Chrome v119 is using 0% CPU on my computer (according to the Chrome Task Manager). Maybe it depends on the GPU.
- catapart 3y agoThat's where my money's at. Usually if you have a rendering error in an otherwise competent product, it's due to it being programmed for a different domain. Here, the CPU and GPU have such different types of work units that structuring for GPU efficiency often means making poor structures for CPU efficiency. Said another way: writing it to be performant on the GPU usually means the data would be hard to work on quickly with a CPU. Add in to the mix that the rendering is not (usually) being managed explicitly by the implementer and is, instead, being left to browser implementations, along with the issue only being a problem for people that don't have discrete GPUs, and you've got a recipe for real thorn in your side, as far as bugs go. Rewrite the whole render stack due to a performance issues for a subset of users? Bifurcate the rendering based on integrated vs discrete GPUs? Bug the browsers that seem to be mishandling CSS animations on integrated GPUs, and then hope they care? Not a lot of great options there. But here's to hoping they figure something out! Solving a hard problem feels pretty good, even if it's not appreciated by your full demographic.
- dist-epoch 3y agoIntegrated GPUs are not necessarily a problem today, newer ones are very fast (for web rendering), have few bugs, and support all APIs (DX 12, Vulkan, video decoding/encoding)
- selfhoster11 3y agoI love that the cookie notice on this website asks for consent to share tracking data with 766 advertising partners. I feel so comfortable with that.
- bathtub365 3y agoInteresting, that’s exactly the same number as Outlook https://news.ycombinator.com/item?id=38441710 https://news.ycombinator.com/item?id=38441710
- elaus 3y agoI really don't understand why a personal website would want to share my data with that many advertising companies...
- evilduck 3y agoTrying to earn their $0.14/mo in advertising revenue.
- bravetraveler 3y agoThrough all of our technical advancement, hosting is still expensive, okay? /s People act like we couldn't afford to host things in the 90s before Moore's law ran for decades. Suggesting we wouldn't have blogs/websites if not for advertising I remember the old Internet
- dylan604 3y agoMy guess would be the person running the website has used one simple 3rd party include that then loads all of the other things so that they might not actually be aware of what's being done under the hood. Or, they are a sociopath. But not being able to come up with reasons is not a good look.
- karaterobot 3y agoAgreed, it's like being hugged by 766 pairs of strong but gentle arms.
- Kiro 3y agoCan someone verify this? I find it hard to believe that the animation is the problem.
- adverbly 3y ago> When removing the animation (tip: remove the css or set status to “paused”), the CPU sits near 0% and the GPU near 0%. Seems pretty easy to replicate. I don't know this particular screen they're talking about otherwise I would try it. I definitely have used CSS animations before without thinking about potential performance implications so this does seem like a good thing to try to understand in better detail. I agree that rotating a square doesn't seem like it should be the root cause here though. EDIT: I suppose it is possible that you are still correct though. Perhaps there is some JavaScript that is looking at the CSS properties as a way to trigger more significant work. It seems like a hacky thing to do, but it would be possible in principal.
- reddalo 3y agoI don't trust this article. Rotation of elements in CSS doesn't cause a reflow of the page, since it's a transform property, and so it doesn't cause a re-render like the article says.
- gizmo 3y agoThe article is wrong but the observations are correct. The codepen link posted somewhere downthread does result in usually high cpu usage (Chrome M2 Mac).
- shadowgovt 3y agoRotation of elements in CSS shouldn't cause a reflow of the page. But the devil is in the details and sometimes, with a deeply complicated declarative API for plotting content on screen, It's easy for the developers working on the browser's rendering layer to inadvertently forget to do the correct thing in favor of the safe thing (ie if recalculating the layout ends up being the identity function, will testing actually pick up that the recalculation was in fact unnecessary or off spec?). I have definitely in the past chased around a massive repaint bug that only showed up in Firefox using flex boxes (only to have it vanish at the next minor revision). Since this performance hit is showing up in Chrome, it will be interesting to see if it is a Chrome specific issue or a webkit issue.
- sebazzz 3y agoThe reflow hypothesis can be confirmed by setting a fixed height and width on the icon and overflow: hidden.
- Redoubts 3y agothis blog has a history of "interesting" takes
- jwestbury 3y agoI trust them that Atlassian product performance is bad in ways that are always novel and surprising, at least.
- linsomniac 3y agoWhile we're on the subject, does bitbucket just seem horribly slow for pulling lately? My work uses bitbucket and my personal projects use github, and lately I've been doing a lot of personal project work over the holidays, and every pull of bitbucket is just painfully slow. Is that because it's a bigger repo?
- solardev 3y agoIs anything from Atlassian ever not slow? Confluence, Jira, etc. are all horribly slow, whether in the UI or just time to respond to any AJAX calls
- pharmakom 3y agoIn this vein, I can’t even register for GitHub on Firefox due to laggy animations. Works fine in Chrome. Did they even test it?
- andygeorge 3y agohuh? works just fine for me in Firefox
- shadowgovt 3y agoI'd be willing to wager the X Factor is graphics card configuration and a card optimized for high performance 3D rendering (including having the drivers installed properly to leverage those features). There's a bit of a correlation between Firefox users and users who are mostly content that their hardware supports explicitly a 2D desktop GUI and is not optimized for anything fancier. But nowadays, the browser itself is a 3D application because the 3D compositing pipeline is also the high performance 2D compositing pipeline.
- andygeorge 3y agoDunno, I use FF on all my PCs with a variety of configurations and do not experience the GitHub slowdown referenced earlier.
- WarOnPrivacy 3y ago> I can’t even register for GitHub on Firefox due to laggy animations. You aren't kidding. On Firefox 120 it ramps up a Xeon core to >50% and floors my GPU 3D at 100%. I opened on Opera and CPU is negligible, GPU is steady at 15% (which still seems high for a throwaway web background). for those playing along at home: https://github.com/signup?source=login https://github.com/signup?source=login
- AntronX 3y agoMy CPU was at 27% (i3-4130) and 27 watts power use vs. 11w at idle. Added uBlock filter: github.com##div.signup-stars and CPU was back to 1%. Background stars animation is the culprit.
- gempir 3y agoThis article is filled with misinformation and seems unnecessary hostile. I think the only reason it got so many points is because it's a hate on Atlassian thread. The implementation seems perfectly normal, I would guess 90% of all developers would implement an animation this way.
- orlp 3y agoIf anything the title should be "inefficient animation implementation in Google Chrome is wasting half a CPU core".
- jeffbee 3y agoThe hostility of one forced to endure Bitbucket is understandable.
- cynicalsecurity 3y agoBitBucket offered free private repos long before GitHub. The hate is unjustified.
- imedadel 3y agoSVG animations in CSS are notoriously CPU intensive (see https://news.ycombinator.com/item?id=22302150 https://news.ycombinator.com/item?id=22302150)
- FesterCluck 3y agoBelievable. I spend a lot of time on this screen and it's been killing performance & Webex sessions. Another place to find this sort of problem is to show full log after a build.
- Thaxll 3y agoI would double check what OP found because his blog is full of inaccuracies, ex:https://thehftguy.com/2023/11/14/the-linux-kernel-has-been-accidentally-hardcoded-to-a-maximum-of-8-cores-for-nearly-20-years/ https://thehftguy.com/2023/11/14/the-linux-kernel-has-been-a...
- CommieBobDole 3y agoI like his article claiming that the Costco website in the UK does not and has never worked at all, where there's people in the comments saying "it works fine". If a major website doesn't work for me, and it's not a one-time thing, I tend to assume the problem might be on my end and troubleshoot from there instead of writing an article about how it's amazing that nobody else has ever noticed that it's been down forever.
- sundvor 3y agohttps://news.ycombinator.com/item?id=38488237 https://news.ycombinator.com/item?id=38488237 ?
- Thaxll 3y agoWell you should read the reply on the kernel bug tracker: "Peter already gave a quick reply on this regard couple years ago [1] and I think more tests and numbers are required in different environments, instead of solely think in the raw number of cores. When a high throughput server starts to fall down based on the task time slices? Maybe increasing from 8 to 24 is fine in normal memory intensive tasks, but what about 128 cores in a high-demand network server? 8 has proven to be "enough" so far (compared to other OSes), but, of course, it doesn't mean it hasn't room for improvements." So it's pretty clear that it's not going to change any time soon and it's not a bug.
- deleted 3y ago[deleted]
- mgaunard 3y agoWe need to stop pushing so much logic in web pages. They should just display stuff, not run silly animations or do calculations in the background.
- hospitalJail 3y agoThat is what Plato's Socrates would say. Plato's Callicles would tell you that this is idealistic nonsense and nature has shown us that we need beautiful pages that drive engagement. Humans teach each other that Socrates is right, but if we look around us, its clear we've been told a lie.
- tantalor 3y agoAn animation is one way to "display stuff" There is no "logic" here.
- dzaima 3y agoSimilar thing presumably happens on GitHub commit pages - at the bottom there's a "You’re not receiving notifications from this thread." (or a different message if you have, presumably) that only loads once you've scrolled to it, but before that it's a spinner which takes up CPU (even though it's not even visible). It's similarly an svg, with 'animation: rotate-keyframes 1s linear infinite;'
- lagniappe 3y agoThis is a cool way to make the case for setting a preference for preferred reduced motion. I never got bothered one way or the other but if it saves battery...
- rafram 3y ago> One thing that is remarkable, the icon is displaying a circle, but the icon image is really a square with transparent corners (inside a div container that is a rectangle). …Yes. Ever seen an image file with circular dimensions? No, because digital images (at least in standard formats) are always rectangles, sometimes with transparent areas that make them to appear to be other shapes. There are so many shockingly basic misunderstandings in this post.
- ChoGGi 3y agoThis person has also stated the Linux kernel is hard-coded for 8 cores. https://news.ycombinator.com/item?id=38260935 https://news.ycombinator.com/item?id=38260935
- deleted 3y ago[deleted]
- user5994461 3y agoIf you're wondering about that one from few weeks ago. One person from Intel noticed the article and confirmed the kernel bug, they ran some of the kernel benchmarks on their 24 core CPU and found up to 15% improvements when fixed (most difference on scheduler fifo benchmark, though 0% difference on most benchmarks). I've ran the same on my computer at home and I also got double digit percent difference on a 32 cores AMD.
- Narretz 3y agoI thought the basic premise was wrong that the Kernel only uses a maximum of 8 cores. It was rather some scheduling logic that was implemented with a maximum of 8 cores in mind. So the author may have been right that something was wrong, but also wrong about the details (like in this article)
- tester756 3y agoOn the other hand he had very influential and interesting posts like this https://thehftguy.com/2016/11/01/docker-in-production-an-history-of-failure/ https://thehftguy.com/2016/11/01/docker-in-production-an-his... https://thehftguy.com/2017/02/23/docker-in-production-an-update/ https://thehftguy.com/2017/02/23/docker-in-production-an-upd...
- Phelinofist 3y agoSee also https://news.ycombinator.com/item?id=38260935 https://news.ycombinator.com/item?id=38260935
- l33tman 3y agoFWIW Spotify's latest big banner in their web/desktop app (something about christmas playlists) takes 100% CPU. I started noticing it after a while when my laptop got really hot and the Spotify Helper Process was stuck at 100%. Navigating away into an album display fixed it..
- smusamashah 3y agoI just tested this, when animation is running, CPU for the tab (according to chrome Task Manager) was around 3% (Core i7-10875H). When animation stopped, it jumped back to 0.0.
- gwbas1c 3y agoI remember how this used to be a common problem with web ads in the mid 2000s. One of the reasons why I loved Chrome when it came out was that the multi-process architecture made it easy to kill a Chrome process without closing all my open tabs: The offending tag would "crash," but otherwise I could continue browsing. Also, around that time there was an ad on Slashdot that gobbled CPU. I remember quickly figuring out that it was the ad, grabbing a screenshot, and emailing them. I got back a quick knowledgeable reply (and apology).
- 0xbadcafebee 3y agoPeople complain a lot about Jira, but Bitbucket is legitimately shitty. Bitbucket lacks tons of features. If you try to integrate it with another product, typically features don't work for Bitbucket, where they'll work for GitHub or GitLab. It only recently, after something like 7 years, gained the ability to pass a secret in a webhook. Group/Org level permissions for certain project properties are apparently not exposed by their OAuth API. Adding repo deploy keys and permissions to integrated products requires manual intervention. The Markdown parser is buggy, the UX is annoying and less useful than their competitors, feature requests go unanswered. It's bizarrely been on life support forever. Atlassian doesn't seem to want to invest in it, despite the fact that the hosted VCS landscape isn't that big, and they've had a huge opportunity to steal business by converting GitHub Enterprise customers to a Bitbucket offering with cheaper deals from bundling with other Atlassian products. Despite all this, there isn't a single solitary reason to adopt Bitbucket, unless using GitHub and GitLab are forbidden. We stay on Bitbucket because we don't want to invest the money and time it'll take to move off. But we know that we will move eventually, because the competition is just better in every way. I can't say that about the rest of Atlassian's products.
- SV_BubbleTime 3y agoI like rooting for an underdog. We use GitLab instead of GitHub. Partly for that, and partly because the CEO saw I mentioned a problem here, and helped fix it. But going with BitBucket seems like a foot gun.
- peter_d_sherman 3y agoRandom idea for a future browser: o Give me flamegraphs of all the computing resources a given web page is using; CPU, processes, threads, fibers, specific methods/procedures/functions inside of the Browser... also, be able to selectively disable and keep disabled, on a granular level (by web page/URL) things that use resources beyond a certain amount, for example, in the article's case, a buggy animation -- but more generically any resource or browser process or sub-process that is taking too much CPU time and/or other computing resources (RAM, I/O, Network, GPU etc.)... (Yes, including those "power user" features could lead to the selective reduction of functionality for some web pages -- but the user should always be able to determine exactly what they want and what they don't want from any given web page...)
- dumbo-octopus 3y agoThis has nothing to do with the circle. Rendering animations in Chromium really is just that expensive. VS Code experienced this same issue with the cursor blinking animation and some loading animations - there the best fix after dozens of attempts and some of the best JS perf engineers in the world looking at it was to actually move back to JS to show/hide the cursor on timeout. The only real "fix" for CSS animated things is to set `steps(30)` or whatever other low value to decrease the refresh rate, but that will make the thing stutter. There's no way to have efficient 60fps animations in chromium. https://github.com/microsoft/vscode/issues/138396 https://github.com/microsoft/vscode/issues/138396 https://github.com/microsoft/vscode/issues/22900 https://github.com/microsoft/vscode/issues/22900 If anyone does know a fix, you could save the developer community about a metric ton of battery life hours worldwide if you share it with the above :)
- Jeema101 3y agoThis is a great example of basic functionality regressing due to the bloat of modern technology stacks. Blinking cursors have existed since the original IBM PC and before. Yet for some reason, now a blinking cursor is a problem that causes CPU spikes on modern gigahertz level machines. This shouldn't even be possible.
- dumbo-octopus 3y agoIndeed. One could write a book on all the ways "DevEx" has stomped over "UserEx".
- sharts 3y agoSounds like another case of pointless feature and lack of enough testing.
- bluedino 3y agoWork at a large company. Lots of non-technical people fall under IT. Security decided that any Linux VM needs Microsoft Defender ATP installed. Okay. It was installed by the DevOps team on all the VM's in Azure. Many, many people reported that their machines were now using 100% CPU, or 1 of their multiple CPUs were pegged by a defender process. This isn't uncommon. Solution? Devops added cores to all machines. Wonder how much that bumped up the bill.
- zackmorris 3y agoThe same thing happens with https://www.wolframalpha.com https://www.wolframalpha.com for me in Safari on macOS, where I frequenly get 250% CPU usage. Even with Safari->Develop->Disable JavaScript, after showing the Develop menu with Safari->Preferences...->Advanced->Show Develop menu in menu bar. Sounds like it's due to the css using time or animations. I can't find a fix for it, other than disabling Safari->Develop->Disable Styles, but who wants to surf the web without css? Here is an AppleScript I've hacked together over time to show the Safari tab for a PID from Activity Monitor so it can be closed, note that I'm on macOS 10.13.6 on this old 2011 Mac Mini, using Safari 13.1.2, so YMMV: -- launch Activity Monitor to find the PID of a misbehaving tab and show it with this script -- ensure that Safari->Debug->Miscellaneous Flags->Show Web Process IDs in Page Titles is enabled tell application "System Events" to tell process "Safari" -- ensure that user has enabled assistive access try menu 1 of menu bar item "Safari" of menu bar 1 -- throws exception if menu not visible on error display dialog "Please enable assistive access for this script by dragging it into the list of apps in: System Preferences->Security & Privacy->Privacy->Accessibility (It must be disabled and re-enabled each time this script is edited)" buttons {"OK"} default button "OK" return end try -- ensure that user has enabled Show Web Process IDs in Page Titles try set debugMenu to menu 1 of menu bar item "Debug" of menu bar 1 -- throws exception if menu not visible on error display dialog "Enable Debug menu in Safari? It will be relaunched but preserve any open windows." -- stops script if Cancel is clicked do shell script "defaults write com.apple.Safari IncludeInternalDebugMenu 1 && killall Safari && osascript -e 'tell application \"Safari\" to activate'" -- force quit Safari to preserve windows on relaunch return end try tell menu item "Show Web Process IDs in Page Titles" of menu 1 of menu item "Miscellaneous Flags" of debugMenu if (value of attribute "AXMenuItemMarkChar" as string) is "missing value" then click end tell end tell -- show tab matching string, prepopulated with [WP _pid_] set searchString to text returned of (display dialog "Please enter a string to find the Safari tab containing it: ([WP _pid_] from Activity Monitor for convenience)" default answer "[WP _pid_]") tell application "Safari" -- bring frontmost to avoid App Tamer from slowing script activate repeat with w from 1 to count of windows repeat 1 times try set theTab to (first tab of window w whose name contains searchString) on error exit repeat end try set current tab of window w to theTab -- work around a bug/feature of Safari where windows lack a way to bring them to front if index of window w is not 1 then set index of window w to 2 tell application "System Events" tell application process "Safari" keystroke "`" using command down end tell end tell end if return end repeat end repeat display dialog "Couldn't find tab containing \"" & searchString & "\"." buttons {"OK"} default button "OK" end tell Just open Script Editor, paste it in and save it as an application under ~/Library/Scripts or by choosing Script menu->Open Scripts Folder->Open User Scripts Folder. The Script menu can be shown via Script Editor->Preferences->General->Show Script menu in menu bar. Then run it and follow the prompts to ensure that assistive access has been enabled and that tabs show their PID. The script is loosely derived from: https://hea-www.harvard.edu/~fine/OSX/safari-tabs.html https://hea-www.harvard.edu/~fine/OSX/safari-tabs.html https://apple.stackexchange.com/questions/45768/how-can-i-figure-out-which-tab-in-safari-is-using-cpu https://apple.stackexchange.com/questions/45768/how-can-i-fi... I tried to make a version that just shows the Safari tab having a pid, but lost a day to it doing a deep dive into listing windows and their pid: https://stackoverflow.com/questions/48058409/get-windows-with-same-process-name-but-different-pid-in-applescript https://stackoverflow.com/questions/48058409/get-windows-wit... https://stackoverflow.com/questions/14551419/listing-all-windows-of-all-applications https://stackoverflow.com/questions/14551419/listing-all-win... https://stackoverflow.com/questions/42018149/get-pids-of-all-open-windows-on-macos https://stackoverflow.com/questions/42018149/get-pids-of-all... Unfortunately Apple made AppleScript and Automator so arduous to use that I consider them adversarial programming. Like with MS Visual Basic, there's usually less than 50% odds of getting a script to work, regardless of how experienced the developer is. Certainly 0% without resources like web forum posts. Web browsers are even worse, in the sense that they're written for users instead of developers. Some low-hanging fruit would be to pause all non-focused tabs after a configurable period of time, so that they only use memory. I've wanted that since I first saw NCSA Mosaic in 1995, along with a great many other improvements which the powers that be seem to work tirelessly to prevent. Blah.