Debugging Vice.com and Window scroll event in Chrome Developer Tools Part 1
How many sites have you gone to that have jerky scrolling? It has happened enough to me in the past couple of years that it has become a serious irritant. I remember really being perturbed when I saw this on Forbes.com about a year ago. The scrolling was so jerky that the site was almost unusable. This week when it happened to me on Vice.com I couldn’t help but pop open the debugger and figure out what the heck was going on. I have had to deal with this issue recently when implementing an image search that potentially had thousands of result.
After moving into UI development and learning CSS and Javascript, I now reflexively pop open Chrome Dev Tools anytime I see a page misbehaving. Cmd+Option-i is burned into my brain as 90% of my work is in the browser developing UIs with Javascript and CSS.
I use an ad-blocker so on Vice.com I tried turning the ad-blocker off and on to see if the scroll issues were better or worse. I could see the blocked ad requests in the console, however, it did not make any difference:
On sites where I have stopped my ad blocker, I usually blame poor performance on ad serving. However in the case of Vice.com, it wasn’t the ads.
Some background on scrolling and content sites, many sites, including major media sites, implement what is known sometimes as infinite-scroll or a UITableView. This is the feature where new content is added to the bottom of the screen in the table view as you scroll down. A few years ago, I first implemented a UITableView or infinite scroll feature using a library called Infinity.js open sourced by AirBnb. This was my first big JavaScript project with a few pages that were small Single Page Applications (SPAs) and a separate window where I had to scroll through about 30–50,000 legal size document images (and where I created HTML in Javascript components that I thought were an anti-pattern ;-). I quickly learned about UI Virtualization or DOM virtualization where you move items out of the DOM and back in, as the user scrolls, so the browser doesn’t slow to a crawl when scrolling through dozens or hundreds, or even thousands, of items. At that time I was in the world of jQuery with a little bit of Vanilla JS and a whole lot of JQuery plugins. Infinity.js worked pretty well until I reached the inherent limit of a Javascript Array, which if you didn’t know, the access times slow way down when you get 50,000 items in the Array. If the project had needed more items in the scroll I would have had to implement a data structure that had better data access performance for large numbers of items or done something hacky and used two or three Array’s.
Moving forward in time I started using Angular 1 and other frameworks that allowed me to develop very sophisticated interfaces without having to know a much about the DOM, Events, etc. and most of them provided similar UITableView or infinite scroll plugins or add-ons. Some would question the use of this feature but it is not going away anytime soon. Smashing magazine has done some interesting research on the UX of infinite scroll.
Getting outside of the frameworks, or, into their guts, and into the vanilla JavaScript, you start to understand how they work and the use of scroll events in the DOM. One of the first things you learn when using a scroll event is that it can slow your interface to a crawl. From Mozilla Developer Network, “Since scroll events can fire at a high rate, the event handler shouldn't execute computationally expensive operations such as DOM modifications.” There is an example in that link of how to throttle scroll events. I use Aurelia on my day job and they clearly know to throttle scroll event functions in the Aurelia’s UI Virtualization module:
_onScroll(): void {
if (!this._ticking && !this._handlingMutations) {
requestAnimationFrame(() => this._handleScroll());
this._ticking = true;
} if (this._handlingMutations) {
this._handlingMutations = false;
}
}
Clearly, this issue has been around for quite a while and implementers have solutions. This StackOverflow question is almost five years old, Choppy/Laggy scroll event on Chrome and IE.
So, back to the question at hand, why can sites like Forbes.com and Vice.com have choppy scrolling in 2017 when it is a well understood issue. Well, first, lets confirm the problem by running Chrome Dev Tools Performance Tool:
Here we see the CPU is maxed out and the Scroll event is the culprit.
So, fortunately there are source maps available for the code here. It is React and so we can dive into the functions that are taking so much CPU. In Part II I am going to dive in and look at the functions involved.