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:
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.
