…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.
My understanding is that transforms can’t cause reflows because they occur in the compositing layer. And as a sibling comment points out: everything round in css is actually a rectangle. Unless it’s a path drawn in an svg element. But then that lives in a rectangular frame. You could animate it with svg, though.
Regardless, I want to say I reject the premise here. I’m not sure why a transform would be so inefficient. I have a feeling it could be something else at work here.
They have an article on "cracking the hackerrank test" that straight up advocates for cheating on screeners companies are starting to do through hackerrank. I'm not about to claim that these tests are at all good at measuring your skill as a developer, but I would much rather a candidate engages with the process honestly than openly brags about cheating.
Last i asked, if you change a (1) pixel on a modern computer, you need to redraw the screen because it's a surface which is being updated.
I've ran the same on my computer at home and I also got double digit percent difference on a 32 cores AMD.
https://thehftguy.com/2016/11/01/docker-in-production-an-his...
https://thehftguy.com/2017/02/23/docker-in-production-an-upd...
Maybe they were trying to argue that for something as simple as that, it could’ve been a div with a background and a font icon, and used CSS to make the div into a circle, and rotate that? It certainly seems more complicated at a glance, but I’m not a frontend dev, so, who knows?
Yeah I don’t get it either.
I kept reading it expecting something to jump out at me. He just goes on about how “a square cannot be rotated”.
This honestly feels like more of a chrome bug or more likely some really weird settings on behalf of the author. I’ve seen this exact approach on the web. Nothing struck me as odd.
What is odd is that he didn’t do any testing with a different browser, machine, or OS even. He just decided to make a blog post.
I dream of a polar-punk alternate reality where we address pixels not by (x, y) but by (r, θ).
Of course there's one big flaw with this line of thinking: even if we used circular (or elliptic) screens, we can't tile them with other circles. Circular windows would waste a lot of space. Maybe we could split in "slices" instead though?
The browser isn't displaying a file, it is displaying data mapped to a rectangle. It is 2023 you should be able to spend some polygons on those shapes.
>> A circle can be rotated in place. It doesn’t take more space than the initial circle. *A square cannot.*
Edit: and just in case you or someone else miss the forest again:
the site developer treats the image as a circle, assuming rotating the image would change only the image.
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?
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/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 :)
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.
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.
I will check if there are options to reduce that.
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.
"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.
Maybe it depends on the GPU.
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.
This isn't exactly a new machine either, wonder if it's falling back to CPU rendering in your configuration.
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.
'''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
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.
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
And besides “Microsoft <3 Open Source” right?
… Right?
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.
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.
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.
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...)
They should just display stuff, not run silly animations or do calculations in the background.
There is no "logic" here.
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.
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.
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).
But going with BitBucket seems like a foot gun.
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.
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
The script is loosely derived from:
https://hea-www.harvard.edu/~fine/OSX/safari-tabs.html
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-wit...
https://stackoverflow.com/questions/14551419/listing-all-win...
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.
tell application "System Events" to tell process "Safari" to tell menu item "Disable JavaScript" of menu 1 of menu bar item "Develop" of menu bar 1
if (value of attribute "AXMenuItemMarkChar" as string) is "missing value" then click
end tell
You can attach a keyboard shortcut to any menu, for example System Preferences->Keyboard->App Shortcuts->Safari->Disable Javascript with command-J. Unfortunately that just toggles Javascript, with no visible indication of whether it's on.
You used to be able to assign a keyboard shortcut to launch applications and scripts, but Apple borked that long ago:
https://apple.stackexchange.com/questions/175215/how-do-i-as...
So instead, I created Automator->Service->Run Shell Script with:
osascript -e 'tell application "Disable Javascript" to activate'
Now I just periodically press shift-command-J while browsing. If a tab won't render, I press command-J, command-R to reload, then command-J again so the tab doesn't use resources.
I used to have a script to launch Safari with Javascript disabled, but Apple changed how it worked so that the flag is stored in their SQLite preferences somewhere, and I just never found time to re-implement it. If anyone knows a way, I'm all ears!
--
Edit: HN stripped the checkmark character (https://www.compart.com/en/unicode/U+2713) when I pasted, even though I made it a code block by prefixing each line with 2 spaces. So I changed the line to:
if (value of attribute "AXMenuItemMarkChar" as string) is "missing value" then click