The performance benefits of rel=noopener
If you have links to another origin, you should use
rel="noopener", especially if they open in a new tab/window.
<a href="http://example.com" target="_blank" rel="noopener"> Example site </a>
Without this, 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.
Web superhero Mathias Bynens wrote about this in detail, but I just discovered there's a performance benefit too.
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.
rel="noopener" the random numbers keep generating at 60fps. Well, in Chrome & Opera anyway.
Update: Edge doesn't experience jank for either link. See below for more details.
So why does this happen?
Windows & processes
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.opener, so there's no cross-window access. Chromium browsers optimise for this and open the new page in its own process.
Here in Chrome HQ we're 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!
Update: Edge has already optimised for the new window case, but not iframes yet. See Fremy's comment for details.
Fun fact: Note I talk about "domain" above rather than "origin". This is because the somewhat frightening
document.domain allows to domains to synchronously become part of the same origin. Ugh.