scrolling like mad man
captured @ 5 fps to save some bandwidth @ full-hd window size
any plugins in chrome?
Just for reference:
some goodness on improving rendering perf
https://dev.opera.com/articles/css-will-change-property/
The reason for scrolling performance is because box-shadow, particularly with a blur radius above 0px, is an expensive paint operation. It is one of the most expensive operations for paint performance, up there with transparency and border-radius.
The fix for this is a simple matter of setting the blur radius to 0px and avoiding the use of expensive paint operations such as these. The devices that see these issues the most are lower powered hardware like; old laptops, tablets and mobile phones. You don’t really notice something like box-shadow affecting scroll performance on a medium to high-end machine.
3 Likes
Crappy old GPU. I’ve never seen the need for a good GPU on a development machine, so I saved money on that in favor of more cores and RAM. My VMs are important to me, you know 
I intentionally left will-change out of the discussion here because there is nothing on this website that would benefit from it. And in the light of “mobile-friendly”, stuff that increases the baseline CPU usage ought to be avoided.
Come on guys, what’s with the elitist attitude regarding older computers? You know how decision-makers are often looking at these things on a craptop or on their phones. And look at the topic you’re saying this in.
There is absolutely no reason why a documentation site shouldn’t have a crisp scrolling and rendering performance even on a 10 year old computer. Don’t be like angular.
2 Likes
Reducing css effect might help on this issue, but doesn’t solve it. Firefox is super smooth in scrolling, it means the hardware can do it.
Based on @fkleuver’s test, even turn off some css effect, only increase the FPS to sub 20, which is way below normal.
I agree that aurelia doc site should work smoothly on old machine. If it doesn’t, the code/css/browser has issue, not the machine displaying it.
My home iMac is 2010 model, I have no interest to replace it. My office Macbook is more powerful, but I like to do thing on my old iMac. Because when my code ran smoothly on the grandpa hardware, I knew it’s efficient and it will work well almost anywhere.
Powerful machine doesn’t mean we can ignore efficiency. After all, we are engineers, efficiency is what we strive for.
2 Likes
This might be the reason why current Firefox is so damn fast in scrolling.
I have been doing some benchmarking and I can definitely see Chrome reporting the frame rate dropping to sub 20fps in some instances. The main culprit from what I can see is as expected, the blur radius value on box-shadow usage. I can see when I scroll an element with box-shadow into view, there is a significant increase in paint cost and the frame rate drops accordingly. Removing the blur radius in a couple of instances where the radius is 40px, results in the lowest frame rate going from 19fps to well above 30fps. I believe there are other factors at hand here, but my investigation continues.
The funny thing here is, I am one of the users who didn’t notice any issues myself scrolling, I don’t have a graphics card on this work PC, but it is a pretty beef gaming specced machine. However, performance metrics tell a different story when you look at what is going on under the hood.
It looks like pure css style/layout thing.
After loading the page, I disabled js using browser setting, to rule out the scrollspy effect.
The highest time to render a frame on my Safari is about 80ms with or without js turned on.
Then I set * {box-shadow: none !important;}, it doesn’t help Safari at all.
It looks like the code block <pre class="language-markup"> slowing down my Safari, it’s choppy every time when there is code sample on my screen.
It is beyond me how those code tokens were positioned by css (ok, looks like simply positioned by pre tag). But it looks like they have some effect on the rendering, either styles or positioning. I got no idea how to remove some css on code block to do further debug.
Just tried the updated guides.
Same as I tested, not enough to fix my Safari performance. Can someone update benchmark for Chrome on PC?
Well my FPS on Chrome doubled from 7 to 14. A solid improvement without question.
That’s not to say it’s any good compared to what it could be: a near-constant 60 FPS on FireFox, no matter how violently I scroll.
For comparison: on a website I made for a client in Aurelia, a particular page has about 70 images on it (scaled down from 600x300 ish) with some absolute positioning tricks and I get a pretty constant 50-60 FPS there on chrome while scrolling.
On another website I made for a client, also in Aurelia, I use Materialize as well with some parallax effects. 50-60 FPS on chrome there as well while scrolling.
So it doesn’t look like it’s impossible to get a good framerate on chrome.
Further testing:
On the homepage of aurelia.io, I get 10 FPS while scrolling in chrome compared to 60 in FireFox.
If I add backface-visibility: none to the main element (again, the absolute positioning seems to trigger a redraw on scroll) this doubles to 20. Still not great, but a lot better.
It’s definitely something with Materialize/chrome. Even on chrome’s very own chrome://extensions/ page the FPS stays at or below 10 while scrolling.
Google are the ones who need to be embarassed here if you ask me…
3 Likes
That justifies a github issue to Chrome team.
That’s what I was thinking, but there is no Chrome repository
I sent them feedback, who knows if/when they’ll do something with that.