当您的页面链接至使用 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. python16_day40【数据结构】

    一.链表 #!/usr/bin/env python # -*-coding:utf8-*- __author__ = "willian" # 一.简单链表 class Node( ...

  2. Linux系统——搭建FTP方式的本地定制化Yum仓库

    (1)搭建公网源yum仓库 安装wget aliyun源 # wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epe ...

  3. IBM WebSphere MQ for net 报错 MQRC_NOT_AUTHORIZED

    最近进入新公司要维护以前的90年代的老系统 用NET对IBMMQ做测试 NET 4.0 +7.5 MQ 版本 待我写好NET调用的代码后出现错误MQRC_NOT_AUTHORIZED 折腾大半天往上找 ...

  4. BUG克星：几款优秀的BUG跟踪管理软件

    Bug管理是指对开发,测试,设计等过程中一系列活动过程中出现的bug问题给予纪录.审查.跟踪.分配.修改.验证.关闭.整理.分析.汇总以及删除等一系列活动状态的管理.,最后出相应图表统计,email通 ...

  5. 关于GET POST

    先说相同点,只有了解了相同点之后才能理解为什么会发生混淆.两者都能向服务器发送数据,提交的“内容”[注1]的格式相同,都是var_1=value_1&var_2=value_2&... ...

  6. 一篇关于Redis的很不错的文章，转载保存下

    绝大部分写业务的程序员,在实际开发中使用 Redis 的时候,只会 Set Value 和 Get Value 两个操作,对 Redis 整体缺乏一个认知.这里对 Redis 常见问题做一个总结,解决 ...

  7. C++ 把文件路径中的单斜杠“\”换成双斜杠“\\”

    <pre name="code" class="cpp"> #include <iostream> #include <strin ...

  8. ThinkPHP5 快速入门文档

    一. 5.0版本采用模块化的设计架构,默认的应用目录下面只有一个index模块目录,如果我要添加新的模块可以使用控制台命令来生成. 切换到命令行模式下,进入到应用根目录并执行如下指令: php thi ...

  9. 使用索贝尔(Sobel)进行梯度运算时的数学意义和代码实现研究

    对于做图像处理的工程师来说,Sobel非常熟悉且常用.但是当我们需要使用Sobel进行梯度运算,且希望得到“数学结果”(作为下一步运算的基础)而不是“图片效果”的时候,就必须深入了解Sobel的知识原 ...

  10. c++生成算式并计算（《构建之法》第一章课后第一题）

    c++实现计算器(自动生成算式并计算) 要满足的需求有以下几个: 自动生成随机的四则运算算式,包含括号和小数. 对生成的算式计算出结果. 算式.结果分别存储到不同的文件. 一 生成算式 由上述需求可知 ...