Optimizations to Chrome’s rendering pipeline improves speed, smoothness, and power draw

A browser’s rendering pipeline is responsible for ensuring the 60 frame per second smoothness that users associate with speed and efficiency. Now, Google has detailed several performance improvements to this component that makes Chrome work smarter.

In a typical workflow, Chrome has 16ms to render each frame in order to achieve 60 fps. The less time spent by the browser on JavaScript execution, style, and layout, the more time there is for sites to load content and run scripts.

Rather than improving raw speed, Chrome is now more intelligent about skipping redundant tasks and reducing the per-frame workload. One optimization reduces the time needed to paint a new frame by 35%:

Chrome now tracks the draw commands generated for each element and can identify visually non-overlapping subsets. If one of these subsets hasn’t been modified, the entire block can be copied directly from the cache without any additional work.

By grouping pixels into tiles, Chrome can deliver smaller and faster updates to the screen, with redraw times reduced by up to 40%:

Any update to the screen, such as the input cursor blinking, would previously require the whole tile to be re-rendered (left). When only a few pixels have changed, Chrome can now redraw only the modified region (right).

The last change has the browser more intelligently optimize the workload to the hardware it’s running on. On Mac, Windows, and Android, Chrome better utilizes GPU acceleration for complex content rendering, thus improving animation performance, input latency, and scroll smoothness for modern webpages.

Taken together, these optimizations allow websites to load faster, run smoother, and use less power. Google notes that these changes have rolled out over the past few months, with the latest version of Chrome hitting stable just last week.