Translator: For it

The original link

Use rel=””noopener”” if your link points to another site, especially if it opens in a new TAB/window.

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

Without this property, the new page can access your Window object via window.opener. Fortunately, the Web’s source security model prevents it from reading your page, but unfortunately some archaic API allows you to navigate your page to a different URL: window.opener. Location = newURL.

Web guru Mathias Bynens has written about this in detail, but I’ve found that it actually improves performance.

< p style=” max-width: 100%; clear: both; min-height: 1em; font-size: 16px;” “>Generate random numbers “button, click to Generate random numbers. (Translator’s Note)

The random numbers here are similar to the vital signs of the current page. If not every frame generates a random number, something is blocking the thread.

Click one of the links below to open a page that requires a lot of JavaScript computation:

  • <a target=""_blank"">
  • <a target=""_blank"" rel=""noopener"">

Without rel=””noopener””, the random number will be blocked by JavaScript in the newly opened page. Not only that, all main thread activity will be blocked. Try selecting text from the page. But after adding rel=””noopener””, the random number generation is kept at 60fps. In Chrome or Opera, of course.

Update: Edge will play a trick on clicking any link. < p style = “max-width: 100%;

So why is that?

Windows & processes

< p style = “max-width: 100%; clear: both; Each process contains multiple threads, including what we call the “main” thread. Parsing, style calculation, layout, drawing, and non-worker JavaScript are all performed in the main thread. That is, the JavaScript in one domain is in a different thread from the JavaScript in another domain in a TAB or window.

However, because we can access the DOM across Windows synchronously through window.opener, the window that is launched by target=””_blank”” is still in the same process (thread). The same goes for iframes and Windows opened through window.open.

Rel =””noopener”” will block window.opener, so there is no cross-window access. The Chromium browser has been optimized to open new pages in a separate process.

Site isolation

< p style =” margin-top: 0px; margin-top: 0px; This means that limited cross-window access becomes asynchronous, which has the benefit of improved security and performance.

Meanwhile, REL =”” Noopener “” can offer you the double benefits of performance and safety today!

Update: Edge has been optimized for new Windows, iframe has not. See Fremy’s message.

Interesting fact: Notice that I kept saying “domain” above, not “origin.” This is because the dreaded document.domain allows two domains to become part of the same source synchronously. I go to!