rel = noopener can improve performance
Original link: jakearchibald.com
If your links to other sites, you should use rel="noopener", especially when clicked, will open in a new tab / window link.
<a href="http://example.com" target="_blank" rel="noopener">
Example site
</a>
Without this attribute, a new page will be through window.openerto access your window object. Fortunately, the source Web security model prevents it reads your page, unfortunately, is the use of some old API you can navigate to different pages of the URL of: window.opener.location = newURL.
Web heroes Mathias Bynens wrote this issue in detail , but I found that it can actually improve performance.
(Original Here is a Demo, there is a "Generate random numbers" button and click to generate a random number .-- Translator's Note)
Here's a random number similar to the vital signs of the current page. If not every frame can generate a random number, indicating that there is something blocking the thread.
Click a link below to open a page requires a lot of computing JavaScript (not the links, please see original - translator's note):
<a target="_blank"><a target="_blank" rel="noopener">
No rel="noopener", a random number will be newly opened page JavaScript blocking. Not only that, all activities will be the main thread is blocked, try to select the text page. But added rel="noopener"later, random number generation has remained at 60fps. Of course, in Chrome or Opera in.
Updated : Edge to click on any link will be caught children. Here we will detail.
Why then is it so?
Windows & processes
Most browsers are multi-process, in addition to Firefox ( they are changed ). Each process contains multiple threads, including we often say that the "main" thread. Resolution, computing style, layout, drawing and non-worker of JavaScript is executed on the main thread. That is, JavaScript JavaScript and another tab or window in a domain in a domain in a different thread.
However, since we can by window.openersynchronized across the window to access the DOM, and therefore through target="_blank"the window start is still the same process (thread) in. By window.openopening iframethe same and windows.
rel="noopener"Prevent window.opener, and therefore there is no access across the window. Chromium browser optimization done to achieve this, it will open a new page in a separate process.
Site isolation
In Chrome headquarters, we have witnessed the migration across sources and new iframe window to the new process , whether or not there rel="noopener". This means that access is limited across the window will become asynchronous, such a benefit is to enhance the security and performance.
At the same time, rel="noopener" it provides the dual benefit performance and safety for you today!
Updated : Edge has been optimized for the case of the new window, iframenot yet. See comments Fremy's.
Interesting phenomenon: note, what I have been saying "domain" (domain) instead of "Source" (origin). This is because the terrible document.domainallows the two domains to become part of the same synchronization source. I go!
