These days, web pages feature 3D graphics and complex animations right in your browser window. So why is the browser UI experience still stuck in the past, with hitching animations and boring visuals?

The way browsers handle more complex tasks has changed quite a lot in recent years, making them more efficient and improving their performance. However, the same can’t be said for the browser UI, which hasn’t kept pace. This is because of the inefficient way the browser UI reaches your screen – so we decided to change that – by introducing Multithreaded Compositor in Opera One.

You might already be using Opera One, the latest evolution of the Opera browser. If so, one of the changes you will have noticed is the revamped UI with new features such as Tab Islands, and the fast and buttery-smooth animations.

So how did we do that? To explain, let’s go over some basics of how a browser works to bring content to your screen.

Multithreading in Chromium browsers

What do we mean when we say, Multithreaded Compositor? In the renderer part of a Chromium-based browser, there is a main thread and a compositor thread.

The main thread is responsible for coordinating and managing the overall rendering process within a browser. It interprets HTML, CSS, and JavaScript code, creates all states of a webpage, handles the user’s inputs like clicks and scrolling, and communicates with the compositor thread to help update what is displayed on the screen.

The compositor thread is responsible for taking the elements that the main thread produces, so that they are displayed on the screen. This includes effects like animations and transitions.

Given all the different jobs it has to do, the main thread often stalls for a short time (as in, tens to hundreds of milliseconds). So the compositor thread takes what the main thread has produced and makes sure it is displayed on the screen as the user scrolls through it. To put it really simply, the compositor thread ensures the user’s experience remains smooth while the main thread catches up.

Introducing a compositor thread in the UI

When it comes to the browser UI, however, it’s a different story. The browser UI includes everything outside the website window – the address and search bar, the buttons, the tabs, and so on. Here there is only one thread, which has to perform all the necessary tasks as well as draw in elements like animations. Basically, everything that needs to happen in the browser UI, happens in the UI thread. As a result, you get rather dull or stuttering animations and hitches when the UI struggles to keep up.

To address this, we introduced the Multithreaded Compositor. Specifically, we made two significant changes:

One, we introduced a compositor thread in the UI – essentially, a similar solution to how the webpage renderer works. This helps take some load off the UI thread, with the separate compositor thread performing the actual painting of the animations to the screen. This way, if the UI thread is blocked, the animations are not affected by stuttering or hitching.

Two, we have switched to using layer-based animations. These will run exclusively in the compositor thread without any UI involvement, so that the animation can continue running even when the UI thread is held up. Layer-based animations perform better – instead of drawing each frame, which can be taxing, we can use affine transformations to modify the layer that has already been drawn in. As this runs entirely on the compositor thread, the end result is much smoother and crisper.

This ensures that, when you use Opera One, you will continue to enjoy smooth animations and a better user experience no matter what.

Download Opera One here!

To read more about Opera One, click here.

newsopera developer

---