This content originally appeared on Jake Archibald's blog and was authored by Jake Archibald's blog
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.
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.
Update: Edge doesn't experience jank for either link because it doesn't support window.opener for _blank links.
So why does this happen?
Windows & processes
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 optimise for this and open the new page in its own process.
Site isolation
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!
Fun fact: Note I talk about "domain" above rather than "origin". This is because the somewhat frightening document.domain allows two domains to synchronously become part of the same origin. Ugh.
This content originally appeared on Jake Archibald's blog and was authored by Jake Archibald's blog
Jake Archibald's blog | Sciencx (2016-07-21T13:55:02+00:00) The performance benefits of rel=noopener. Retrieved from https://www.scien.cx/2016/07/21/the-performance-benefits-of-relnoopener/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.