TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Buggy animation in Atlassian Bitbucket is wasting half a CPU core at all times

261 点作者 user5994461超过 1 年前

31 条评论

rafram超过 1 年前
&gt; 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).<p>…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.<p>There are so many shockingly basic misunderstandings in this post.
评论 #38487617 未加载
评论 #38487402 未加载
评论 #38487431 未加载
评论 #38487773 未加载
评论 #38487720 未加载
评论 #38487727 未加载
评论 #38490544 未加载
ioulian超过 1 年前
Strange to see this, as the animation should NOT trigger a layout recalculation (transform is done on it&#x27;s own &quot;layer&quot;, is GPU accelerated and that&#x27;s why it&#x27;s more performant).<p>The article mentions &quot;The computer is doing a lot more work and recomputing the layout of the entire page.&quot;, but it&#x27;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.<p>So the &quot;bug&quot;, must be somewhere else?
dumbo-octopus超过 1 年前
This has nothing to do with the circle. Rendering animations in Chromium really is just that expensive.<p>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&#x2F;hide the cursor on timeout. The only real &quot;fix&quot; 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&#x27;s no way to have efficient 60fps animations in chromium.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;microsoft&#x2F;vscode&#x2F;issues&#x2F;138396">https:&#x2F;&#x2F;github.com&#x2F;microsoft&#x2F;vscode&#x2F;issues&#x2F;138396</a><p><a href="https:&#x2F;&#x2F;github.com&#x2F;microsoft&#x2F;vscode&#x2F;issues&#x2F;22900">https:&#x2F;&#x2F;github.com&#x2F;microsoft&#x2F;vscode&#x2F;issues&#x2F;22900</a><p>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 :)
评论 #38488387 未加载
reddalo超过 1 年前
I don&#x27;t trust this article. Rotation of elements in CSS doesn&#x27;t cause a reflow of the page, since it&#x27;s a transform property, and so it doesn&#x27;t cause a re-render like the article says.
评论 #38486731 未加载
评论 #38487730 未加载
评论 #38487081 未加载
评论 #38487331 未加载
selfhoster11超过 1 年前
I 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.
评论 #38486973 未加载
评论 #38486937 未加载
评论 #38487962 未加载
评论 #38487703 未加载
Thaxll超过 1 年前
I would double check what OP found because his blog is full of inaccuracies, ex:<a href="https:&#x2F;&#x2F;thehftguy.com&#x2F;2023&#x2F;11&#x2F;14&#x2F;the-linux-kernel-has-been-accidentally-hardcoded-to-a-maximum-of-8-cores-for-nearly-20-years&#x2F;" rel="nofollow noreferrer">https:&#x2F;&#x2F;thehftguy.com&#x2F;2023&#x2F;11&#x2F;14&#x2F;the-linux-kernel-has-been-a...</a>
评论 #38488254 未加载
评论 #38493853 未加载
h1fra超过 1 年前
The article is missing the keyframes so it&#x27;s hard to be sure what&#x27;s the culprit but for those curious a simple animation like this can consume 12-20% CPU on my computer (chrome v119)<p><a href="https:&#x2F;&#x2F;codepen.io&#x2F;bodinsamuel&#x2F;pen&#x2F;VwgEGyE" rel="nofollow noreferrer">https:&#x2F;&#x2F;codepen.io&#x2F;bodinsamuel&#x2F;pen&#x2F;VwgEGyE</a>
评论 #38486680 未加载
评论 #38486557 未加载
评论 #38486644 未加载
评论 #38486667 未加载
评论 #38486643 未加载
评论 #38486710 未加载
评论 #38488929 未加载
archerx超过 1 年前
Should have used a .gif for the animation :)<p>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.
temp00112超过 1 年前
I don&#x27;t think the performance reason is this<p>&#x27;&#x27;&#x27;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.&#x27;&#x27;&#x27;<p>transform translations doesn&#x27;t make the browser recalculate the layout for neighbour elements
0xbadcafebee超过 1 年前
People 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&#x27;t work <i>for Bitbucket</i>, where they&#x27;ll work for GitHub or GitLab. It only recently, after something like 7 years, gained the ability to <i>pass a secret in a webhook</i>. Group&#x2F;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.<p>It&#x27;s bizarrely been on life support forever. Atlassian doesn&#x27;t seem to want to invest in it, despite the fact that the hosted VCS landscape isn&#x27;t that big, and they&#x27;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&#x27;t a single solitary reason to adopt Bitbucket, unless using GitHub and GitLab are forbidden.<p>We stay on Bitbucket because we don&#x27;t want to invest the money and time it&#x27;ll take to move off. But we know that we will move eventually, because the competition is just better in every way. I can&#x27;t say that about the rest of Atlassian&#x27;s products.
pharmakom超过 1 年前
In this vein, I can’t even register for GitHub on Firefox due to laggy animations. Works fine in Chrome. Did they even test it?
评论 #38486812 未加载
评论 #38487149 未加载
评论 #38486738 未加载
zerop超过 1 年前
But why chrome implements CSS Animation in a way that would cost so much CPU?
评论 #38486461 未加载
评论 #38486482 未加载
imedadel超过 1 年前
SVG animations in CSS are notoriously CPU intensive (see <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=22302150">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=22302150</a>)
bluedino超过 1 年前
Work at a large company. Lots of non-technical people fall under IT.<p>Security decided that any Linux VM needs Microsoft Defender ATP installed. Okay.<p>It was installed by the DevOps team on all the VM&#x27;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&#x27;t uncommon.<p>Solution? Devops added cores to all machines. Wonder how much that bumped up the bill.
peter_d_sherman超过 1 年前
Random idea for a future browser:<p>o Give me flamegraphs of all the computing resources a given web page is using; CPU, processes, threads, fibers, specific methods&#x2F;procedures&#x2F;functions inside of the Browser... also, be able to selectively disable and keep disabled, on a granular level (by web page&#x2F;URL) things that use resources beyond a certain amount, for example, in the article&#x27;s case, a buggy animation -- but more generically any resource or browser process or sub-process that is taking too much CPU time and&#x2F;or other computing resources (RAM, I&#x2F;O, Network, GPU etc.)...<p>(Yes, including those &quot;power user&quot; 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&#x27;t want from any given web page...)
artursapek超过 1 年前
I fixed a bug like this in online-go.com once. The &quot;unread notification&quot; 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.
评论 #38486533 未加载
mgaunard超过 1 年前
We need to stop pushing so much logic in web pages.<p>They should just display stuff, not run silly animations or do calculations in the background.
评论 #38487783 未加载
评论 #38486840 未加载
Kiro超过 1 年前
Can someone verify this? I find it hard to believe that the animation is the problem.
评论 #38486545 未加载
gwbas1c超过 1 年前
I remember how this used to be a common problem with web ads in the mid 2000s.<p>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 &quot;crash,&quot; but otherwise I could continue browsing.<p>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).
SV_BubbleTime超过 1 年前
I 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.<p>But going with BitBucket seems like a foot gun.
FesterCluck超过 1 年前
Believable. I spend a lot of time on this screen and it&#x27;s been killing performance &amp; Webex sessions. Another place to find this sort of problem is to show full log after a build.
dzaima超过 1 年前
Similar thing presumably happens on GitHub commit pages - at the bottom there&#x27;s a &quot;You’re not receiving notifications from this thread.&quot; (or a different message if you have, presumably) that only loads once you&#x27;ve scrolled to it, but before that it&#x27;s a spinner which takes up CPU (even though it&#x27;s not even visible). It&#x27;s similarly an svg, with &#x27;animation: rotate-keyframes 1s linear infinite;&#x27;
linsomniac超过 1 年前
While we&#x27;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&#x27;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&#x27;s a bigger repo?
评论 #38486631 未加载
l33tman超过 1 年前
FWIW Spotify&#x27;s latest big banner in their web&#x2F;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超过 1 年前
I 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.
lagniappe超过 1 年前
This 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...
Phelinofist超过 1 年前
See also <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=38260935">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=38260935</a>
gempir超过 1 年前
This article is filled with misinformation and seems unnecessary hostile.<p>I think the only reason it got so many points is because it&#x27;s a hate on Atlassian thread.<p>The implementation seems perfectly normal, I would guess 90% of all developers would implement an animation this way.
评论 #38486690 未加载
评论 #38486796 未加载
jxf超过 1 年前
I wonder what the total amount of wasted CPU is for displaying and fetching advertising.
sharts超过 1 年前
Sounds like another case of pointless feature and lack of enough testing.
zackmorris超过 1 年前
The same thing happens with <a href="https:&#x2F;&#x2F;www.wolframalpha.com" rel="nofollow noreferrer">https:&#x2F;&#x2F;www.wolframalpha.com</a> for me in Safari on macOS, where I frequenly get 250% CPU usage. Even with <i>Safari-&gt;Develop-&gt;Disable JavaScript</i>, after showing the Develop menu with <i>Safari-&gt;Preferences...-&gt;Advanced-&gt;Show Develop menu in menu bar</i>. Sounds like it&#x27;s due to the css using time or animations. I can&#x27;t find a fix for it, other than disabling <i>Safari-&gt;Develop-&gt;Disable Styles</i>, but who wants to surf the web without css?<p>Here is an AppleScript I&#x27;ve hacked together over time to show the Safari tab for a PID from Activity Monitor so it can be closed, note that I&#x27;m on macOS 10.13.6 on this old 2011 Mac Mini, using Safari 13.1.2, so YMMV:<p><pre><code> -- launch Activity Monitor to find the PID of a misbehaving tab and show it with this script -- ensure that Safari-&gt;Debug-&gt;Miscellaneous Flags-&gt;Show Web Process IDs in Page Titles is enabled tell application &quot;System Events&quot; to tell process &quot;Safari&quot; -- ensure that user has enabled assistive access try menu 1 of menu bar item &quot;Safari&quot; of menu bar 1 -- throws exception if menu not visible on error display dialog &quot;Please enable assistive access for this script by dragging it into the list of apps in: System Preferences-&gt;Security &amp; Privacy-&gt;Privacy-&gt;Accessibility (It must be disabled and re-enabled each time this script is edited)&quot; buttons {&quot;OK&quot;} default button &quot;OK&quot; 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 &quot;Debug&quot; of menu bar 1 -- throws exception if menu not visible on error display dialog &quot;Enable Debug menu in Safari? It will be relaunched but preserve any open windows.&quot; -- stops script if Cancel is clicked do shell script &quot;defaults write com.apple.Safari IncludeInternalDebugMenu 1 &amp;&amp; killall Safari &amp;&amp; osascript -e &#x27;tell application \&quot;Safari\&quot; to activate&#x27;&quot; -- force quit Safari to preserve windows on relaunch return end try tell menu item &quot;Show Web Process IDs in Page Titles&quot; of menu 1 of menu item &quot;Miscellaneous Flags&quot; of debugMenu if (value of attribute &quot;AXMenuItemMarkChar&quot; as string) is &quot;missing value&quot; then click end tell end tell -- show tab matching string, prepopulated with [WP _pid_] set searchString to text returned of (display dialog &quot;Please enter a string to find the Safari tab containing it: ([WP _pid_] from Activity Monitor for convenience)&quot; default answer &quot;[WP _pid_]&quot;) tell application &quot;Safari&quot; -- 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&#x2F;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 &quot;System Events&quot; tell application process &quot;Safari&quot; keystroke &quot;`&quot; using command down end tell end tell end if return end repeat end repeat display dialog &quot;Couldn&#x27;t find tab containing \&quot;&quot; &amp; searchString &amp; &quot;\&quot;.&quot; buttons {&quot;OK&quot;} default button &quot;OK&quot; end tell </code></pre> Just open Script Editor, paste it in and save it as an application under <i>~&#x2F;Library&#x2F;Scripts</i> or by choosing <i>Script menu-&gt;Open Scripts Folder-&gt;Open User Scripts Folder</i>. The Script menu can be shown via <i>Script Editor-&gt;Preferences-&gt;General-&gt;Show Script menu in menu bar</i>. Then run it and follow the prompts to ensure that assistive access has been enabled and that tabs show their PID.<p>The script is loosely derived from:<p><a href="https:&#x2F;&#x2F;hea-www.harvard.edu&#x2F;~fine&#x2F;OSX&#x2F;safari-tabs.html" rel="nofollow noreferrer">https:&#x2F;&#x2F;hea-www.harvard.edu&#x2F;~fine&#x2F;OSX&#x2F;safari-tabs.html</a><p><a href="https:&#x2F;&#x2F;apple.stackexchange.com&#x2F;questions&#x2F;45768&#x2F;how-can-i-figure-out-which-tab-in-safari-is-using-cpu" rel="nofollow noreferrer">https:&#x2F;&#x2F;apple.stackexchange.com&#x2F;questions&#x2F;45768&#x2F;how-can-i-fi...</a><p>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:<p><a href="https:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;48058409&#x2F;get-windows-with-same-process-name-but-different-pid-in-applescript" rel="nofollow noreferrer">https:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;48058409&#x2F;get-windows-wit...</a><p><a href="https:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;14551419&#x2F;listing-all-windows-of-all-applications" rel="nofollow noreferrer">https:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;14551419&#x2F;listing-all-win...</a><p><a href="https:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;42018149&#x2F;get-pids-of-all-open-windows-on-macos" rel="nofollow noreferrer">https:&#x2F;&#x2F;stackoverflow.com&#x2F;questions&#x2F;42018149&#x2F;get-pids-of-all...</a><p>Unfortunately Apple made AppleScript and Automator so arduous to use that I consider them adversarial programming. Like with MS Visual Basic, there&#x27;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.<p>Web browsers are even worse, in the sense that they&#x27;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&#x27;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.
评论 #38491587 未加载