12 Apr Fixing horrible scrolling performance on this site

For a long time, I thought Firefox was just slow. After all, it was my main browser, and I have more than a hundred tabs open at any given time. I found that when scrolling around some sites (including this very one - my own), performance would come to a halt. I do not have a powerful computer: it's just an i3 from several generations ago. I often saw Firefox taking up 30% CPU, so I thought horrible scrolling performance was a result of Firefox using so much CPU. I didn't think scrolling was the _cause_ of so much CPU usage - because my site scrolled fine in Chrome! At work, I also use Firefox as my main browser. I also have hundreds of tabs open there. Firefox CPU usage hovers around 4%. I chalked it up to the powerful 4th gen i7 CPU in my workstation. I think at this point I should explain why I use Firefox as my main browser anyway: I love vertical tabs. Horizontal tabs take up valuable vertical space on modern widescreen monitors. Moreover, most sites are not even designed to use up widescreen real estate. It's much easier to read short lines of text than a line that stretches 1,920+ pixels wide. Vertical tabs (via the [Tab Tree](https://github.com/traxium/tabtree) extension) solve this problem beautifully for me. Besides that, I also feel the need to mention Chrome's horrible tab management when multiple tabs are opened. As a developer, I constantly find myself opening many tabs to find a solution to some mundane problem. But what good is a tab when you don't even know what tab you're on?!  Don't tell me this has never happened to you before. Vertical tabs work beautifully. They use up the otherwise wasted space on a widescreen monitor. And I can easily scroll through my open tabs. But back to the original problem. I tried everything to fix Firefox's performance issues. I uninstalled almost all my extensions (except for Tab Tree). I closed lots of tabs. And no matter what I did, Firefox still used more and more CPU. So I [reset my profile](https://support.mozilla.org/en-US/kb/reset-preferences-fix-problems). I was holding off doing this because it seemed annoying. But it actually seemed to work. A bit. I noticed CPU usage go down, but it would still go back up after a few days. Today, Firefox was using around 10% CPU. Pretty nice. But when I opened this website and scrolled around, CPU usage shot up instantly. Woah, hold up there. Still not convinced that this could be my problem, I opened my site in Chrome, and it scrolled fine. No spikes anywhere, no dropped frames. Scrolling was a buttery smooth 60 FPS. But the truth was, scrolling performance was B-A-D in Firefox. In fact, the page paint took > 1 second each time I scrolled. So I looked through the old and antiquated JavaScript code that made up this site. Even though the code was bad (it's fixed up a bit now and also using my new [quantum.js](https://github.com/mlcheng/js-quantum/) library), there were literally no event listeners at all - let alone scroll listeners! To prove that it wasn't the JavaScript, I disabled JavaScript in the console. Scrolling was still choppy. So I checked for any rouge CSS styles, like transitions, fixed background images, etc. Nothing popped out to me. So I removed all the CSS using the console's style editor. And then everything was fixed. So it was the CSS. Line by line, I combed through and removed anything that remotely seemed like it could affect performance. Then I saw it: **I had an inset box shadow for the main content**. I removed it, and everything became buttery smooth again. My guess is that the inset box shadow somehow stretched through the whole content body, and therefore the browser had to repaint the huge shadow upon each scroll. The interesting thing is that it worked fine in Chrome. But, oh well. After finding that out, I recreated the shadow using a different method and blah blah blah long story short pushed it live. And all that said, Firefox is still eating 40% CPU.

Comments

Write a comment

Comment