1/06/2018 update: this blog post is now largely out-of-date and to make matters worse, I've lost the images during a migration. Although the principles still apply, tooling has changed, so your milage may vary.
Timeline tab in Chrome DevTools offers a peak into the stages of displaying a web page, offering insight into what is happening under the hood. If you are not sure what
Recalculate Style and
Composite Layers means, head on to this excellent talk by Paul Lewis.
I've stumbled recently upon Unify - a webpage dedicated to tracking browser support for unicode characters. It's great, but if you go into a view with a lot characters, the framerate plummets. So let's have a look under the hood if we can find out what's happening.
Let's enable two options first. The framerate count and
Paint rectangles. The latter shows us sections which are rerendered by the browser. Open the DevTools and click the widget in the bottom-right corner.
Now start scrolling. The framerate drops radically and the whole screen will go red indicating that the whole document is being re-rendered. Framerate depends on your machine, but on my Macbook Air it drops to ~5fps.
Let's open the Timeline tab and have a closer look. Hit record and start scrolling for a few seconds. Long green bars representing paint times stand out - and they take way longer then anything else.
Elements tab, highlighting a node and pressing
h. This will set
display: none on it.
Unfortunately, our page is very simple and duh, if we hide the table it gets fast - this does not help us at all then.
You might notice something about the background though. It's a subtle pattern, so it might not be immediately that clear but it's fixed. So when we scroll our massive table, the simple, repeating background and table need to be redrawn. If you look at the
body tag in the
Elements tab it has a style of
background-attachment: fixed;. When removed, voila our framerate stays within 30-60fps (unless you are on IE8).
Investigating rendering issues is not always easy, but with better tooling and insight into what is happening in the browser, it's at least very much possible.