After getting back from a 3 month holiday I’ve been exposed to a lot of new info on rendering performance from people working on Chrome/blink.
These two videos are must see for all front-end dev’s writing HTML, CSS and JavaScript.
The rendering engine has always been a black box til now, we haven’t known the best ways to optimize things.
The Chrome dev tools expose how rendering happens and makes it easy for us to find what work we’re making the browser do and identify bottlenecks.
I have never done such micro improvements before but I’m finding minor tweaks to the css can have massive improvements on sites with laggy scrolling.
The videos will do a much better job at explaining how the tools work than me but I can give you a few practical examples.
Sites that are notoriously janky are ones that update the dom regularly with js, use fixed positioning, or even lots of positioning with z-index.
The main finding was understanding the different steps that the browser takes to render something on the screen
Put simply, with each frame the following steps all need to occur in 16ms to be able to update the page at 60 frames per second giving the illusion of fluid motion.
js can execute taking a certain amount of time
Rendering is a step that happens whenever the browser needs to recalculate styles or layout e.g. changes to classes, window size, images loading pushing things around etc.
Painting is the drawing of actual pixels - areas of the page that are in ‘layers’ are saved as separate images
Compositing is then stacking all of the separate images together to present an image to the screen.
So the things you want to do to decrease rendering time are:
Record some action in the Timeline Frames and find where the majority of time is being spent.
Turn on Show Paint Rectangles to show which areas of the page are getting rendered over and over.
Reduce the number of paints by changing the DOM less often or by moving unrelated areas of the page into their own layers - transform: translateZ() is one way.
Turn on Continuous repaint to show frames per second for continuously repainting the whole page. You can reduce fps by removing costly styles. e.g. fliters / large drop shadows - sometimes a combinations of styles is costly.
It’s fun to play with and give a lot of insight into the source of performance problems.
Safari has similar tools, Opera is basically the same as Chrome for now, Firefox and IE have no tools like this… yet.
