当您的页面链接至使用 target="_blank" 的另一个页面时，新页面将与您的页面在同一个进程上运行。 如果新页面正在执行开销极大的 JavaScript，您的页面性能可能会受影响。

此外，target="_blank" 也是一个安全漏洞。新的页面可以通过 window.opener 访问您的窗口对象，并且它可以使用 window.opener.location = newURL 将您的页面导航至不同的网址。

单击下面的一个链接，打开一个需要大量JavaScript计算的页面（以下并非链接，请参见原文——译者注）：

<a target="_blank">

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

没有rel="noopener"，随机数会被新打开页面中的JavaScript阻断。不仅如此，所有主线程活动也会被阻塞，试试选择页面中的文本。但加了rel="noopener"之后，随机数生成一直保持在60fps。当然，是在Chrome或Opera中。

大多数浏览器都是多进程的，除了Firefox（他们正在改）。每个进程包含多个线程，包括我们常说的“主”线程。解析、样式计算、布局、绘制和非worker的JavaScript都在主线程里执行。就是说，一个域中的JavaScript与另一个标签页或窗口中的域中的JavaScript在不同的线程里。

然而，由于我们可以通过window.opener同步跨窗口地访问DOM，因此通过target="_blank"启动的窗口还在同一个进程（线程）中。通过window.open打开的iframe和窗口也一样。

rel="noopener"会阻止window.opener，因此不存在跨窗口访问。Chromium浏览器为此做过优化，会在独立的进程中打开新页面。

REFs

网站使用 rel="noopener" 打开外部锚的更多相关文章

  1. Web 安全问题 rel="noopener nofollw"

    1. noopener 如果你需要用 a 标签打开一个标签页时,你会使用 target='_blank' 这个属性,此时你需要添加 rel='noreferrer noopener' 当你使用 tar ...

  2. a标签属性 rel=noopener noreferrer

    当你浏览一个页面点击一个a标签链接跳转到另一个页面时, <a href="http://www.baidu.com" target="_blank"> ...

  3. a rel=noopener

    看vue-element-admin的源码的时候,看到a 标签使用  rel=noopener: 然后就很奇怪这个是干什么用的:然后百度到一篇文章,涨知识了. 个人的理解是:不加 rel=noopen ...

  4. WEB - 关于rel="noopener"

    参考网址 https://mathiasbynens.github.io/rel-noopener/ 例子 <a href="https://cli.vuejs.org" t ...

  5. Pyqt 打开外部链接的几种方法

    Pyqt 触发一个事件,打开外部链接,我找到了这个方法,供大家参考 1. QDesktopServices 的openUrl 方法 QtGui.QDesktopServices.openUrl(QtC ...

  6. Android打开外部DB文件

    DB文件要放在Assets文件夹下,封装一个工具类,如下: package com.XX.DB; import java.io.File; import java.io.FileOutputStrea ...

  7. Ｃ#　以嵌入到窗体的方式打开外部exe

    using System; using System.Collections.Generic; using System.Text; using System.Diagnostics; using S ...

  8. 微信不支持App下载的解决方案 微信跳转打开外部浏览器下载（苹果跳转商店下载）

    在微信中,打开app下载链接,或者使用微信扫一扫app下载二维码,都是无法下载app的. 因为腾讯为了自身利益,屏蔽了其他app直接在微信中下载.下面给分享下,找到的2种有效的解决方案. 方案:点击链 ...

  9. MFC 用ShellExecute打开外部文件

    知识点: 获取CListCtrl选中文本 用ShellExecute打开外部文件 一.CListCtrl::GetFirstSelectedItemPosition CListCtrl::GetFir ...

随机推荐

  1. php composer使用过程

    1.安装composer curl -sS https://getcomposer.org/installer | php mv composer.phar /usr/local/bin/compos ...

  2. 20145202马超 2016-2017-2 《Java程序设计》第8周学习总结

    20145202马超 2016-2017-2 <Java程序设计>第8周学习总结 教材学习内容总结 第十四章 NIO与NIO2 NIO使用频道(channel)来衔接数据节点,对数据区的标 ...

  3. Gulp和Webpack对比

    在现在的前端开发中,前后端分离.模块化开发.版本控制.文件合并与压缩.mock数据等等一些原本后端的思想开始逐渐渗透到“大前端”的开发中.前端开发过程越来越繁琐,当今越来越多的网站已经从网页模式进化到 ...

  4. 微信小程序：全局配置app.json

    微信小程序:全局配置app.json 一.全局配置app.json app.json文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包 ...

  5. Python3.6（windows系统）安装pip.whl

    Python3.6(windows系统)安装pip.whl 1,下载whl文件:https://pypi.python.org/pypi/pip#downloads 2,将下载的文件放入Python的 ...

  6. linux及安全《Linux内核设计与实现》第四章——20135227黄晓妍

    第四章 进程调度 进程调度程序是一个内核子系统 分配有限的处理器时间和资源 最大限度利用时间的原则(只要有可执行的进程,那么总会有进程执行) 基本工作:从一组处于等待(阻塞)状态的可执行进程中选择一个 ...

  7. Win32程序支持命令行参数的做法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 首先说说Win 32 API程序如何支持命令行参数.Win 32程序的入口函数为: int APIENTRY _tWi ...

  8. 【Java----判断字符串是否乱码】

    import java.util.regex.Matcher; import java.util.regex.Pattern; public class ChineseUtill { private ...

  9. lucas 快速求大数组合数

    根据公式就是 对每次C(n,m) =  C(n%p,m%p) * C(n/p,m/p); ll pow(ll x,ll n) { ll res = ; x%=mod; while (n) { ) re ...

  10. linux中find与rm实现查找并删除目录或文件

    linux 下用find命令查找文件,rm命令删除文件. 删除指定目录下指定文件find 要查找的目录名 -name .svn |xargs rm -rf 删除指定名称的文件或文件夹: find -t ...