Our Blog

The performance benefits of rel="noopener"

When developing websites and web applications, we need to add links to another origin all the time, especially if they open in a new tab or new window.

<a href="http://example.com" target="_blank" rel="noopener">
Example site
</a>

Without rel="noopener", the new page can access your window object via:

window.opener

Thankfully the origin security model of the web prevents it reading your page, but no-thankfully some legacy APIs mean it can navigate your page to a different URL using:

window.opener.location = newURL

Mathias Bynens wrote about this in detail, but we find out there is a performance benefit too.

Demo:

The random numbers act like a heartbeat for this page. If random numbers aren't being generated every frame, something is holding up the thread.

Now click one of these to open a page that runs some expensive JavaScript:


Without rel="noopener", the random numbers are disrupted by the new page's JavaScript. Not only that, all main-thread activity is disrupted - try selecting text on the page. But with rel="noopener" the random numbers keep generating at 60fps. Well, in Chrome & Opera anyway.

Most browsers are multi-process with the exception of Firefox (and they're working on it). Each process has multiple threads, including what we often call the "main" thread. This is where parsing, style calculation, layout, painting and non-worker JavaScript runs. This means JavaScript running on one domain runs on a different thread to a window/tab running another domain.

However, due to the synchronous cross-window access the DOM gives us via window.opener, windows launched via target="_blank" end up in the same process & thread. The same is true for iframes and windows opened via window.open.

rel="noopener" prevents window.opener, so there's no cross-window access. Chromium browsers optimize for this and open the new page in its own process.

Without rel="noopener", the main proccess are disrupted by the new page's JavaScript. Not only that, all main-thread activity is disrupted - try selecting text on the page. But with rel="noopener" the page can update at 60fps. Well, in Chrome & Opera anyway.

Note: Edge doesn't experience jank for either link because it doesn't support window.opener for _blank links.

In Chrome HQ they are looking at moving cross-domain iframes and new windows into their own process even if they don't have rel="noopener". This means the limited cross-window access will become asynchronous, but the benefit is improved security and performance.

In the meantime, rel="noopener" gives you the performance & security benefit today!


tags