How I made Google’s data grid scroll 10x faster with one line of CSS

The “Top linking sites” section in Google Search Console, 500 rows per page

Step 1 — Recording a performance profile

Performance profiles are incredibly helpful in these cases, and just by viewing the report you can often clearly see why something has bad performance. So I opened DevTools / Performance and started a recording, scrolled the list down a bit and then stopped the recording. This is what I saw:

Performance profile for scrolling the “Top linking sites” data grid, very low FPS

Step 2 — Figuring out what’s wrong

The timeline chart at the top shows how busy the CPU is with different types of tasks: orange for JavaScript, purple for layout and styles and green for painting. Here it is all purple, suggesting this is not a JavaScript issue but rather a DOM / styling issue:

Chart shows that CPU is busy handling layout
Waterfall chart shows that “Update layer tree” is what makes scrolling slow

Step 3 — Checking those layers

Chrome DevTools includes an impressive amount of helpful tools, some of them more hidden than others. The Layers panel is one such hidden gem, to find it you have to hit the menu button in DevTools and pick More tools / Layers. For my scenario it looks like this:

The “Layers” panel in Chrome DevTools, layer filled with content all the way down

Step 4 — Inspecting the DOM

Unfortunately, the DOM is not very performant when containing many elements. If it were, the virtualization techniques implemented in various popular JS data grids on the web would not be needed. An educated guess at this point is that the table is rendering a lot of elements. By setting up a Live expression on the DevTools Console you can click around in the elements panel and find out. Switch over to Console, click the Create live expression button (the eye) and type $0.querySelectorAll('*').length.

Live expression showing descendant element count for the selected element
A lot of elements!

Step 5 — Improving the situation

Based on the data in the performance profile, I suspect that the entire page is laid out when you scroll the grid. And laying out that many elements is costly. If only there was a way to constrain the effects…

Scrolling much improved!
table {
contain: strict;
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Johan Isaksson

Johan Isaksson

JavaScript developer focused on UI and performance