网站使用 rel="noopener" 打开外部锚
当您的页面链接至使用 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" 打开外部锚的更多相关文章
- Web 安全问题 rel="noopener nofollw"
1. noopener 如果你需要用 a 标签打开一个标签页时,你会使用 target='_blank' 这个属性,此时你需要添加 rel='noreferrer noopener' 当你使用 tar ...
- a标签属性 rel=noopener noreferrer
当你浏览一个页面点击一个a标签链接跳转到另一个页面时, <a href="http://www.baidu.com" target="_blank"> ...
- a rel=noopener
看vue-element-admin的源码的时候,看到a 标签使用 rel=noopener: 然后就很奇怪这个是干什么用的:然后百度到一篇文章,涨知识了. 个人的理解是:不加 rel=noopen ...
- WEB - 关于rel="noopener"
参考网址 https://mathiasbynens.github.io/rel-noopener/ 例子 <a href="https://cli.vuejs.org" t ...
- Pyqt 打开外部链接的几种方法
Pyqt 触发一个事件,打开外部链接,我找到了这个方法,供大家参考 1. QDesktopServices 的openUrl 方法 QtGui.QDesktopServices.openUrl(QtC ...
- Android打开外部DB文件
DB文件要放在Assets文件夹下,封装一个工具类,如下: package com.XX.DB; import java.io.File; import java.io.FileOutputStrea ...
- C# 以嵌入到窗体的方式打开外部exe
using System; using System.Collections.Generic; using System.Text; using System.Diagnostics; using S ...
- 微信不支持App下载的解决方案 微信跳转打开外部浏览器下载(苹果跳转商店下载)
在微信中,打开app下载链接,或者使用微信扫一扫app下载二维码,都是无法下载app的. 因为腾讯为了自身利益,屏蔽了其他app直接在微信中下载.下面给分享下,找到的2种有效的解决方案. 方案:点击链 ...
- MFC 用ShellExecute打开外部文件
知识点: 获取CListCtrl选中文本 用ShellExecute打开外部文件 一.CListCtrl::GetFirstSelectedItemPosition CListCtrl::GetFir ...
随机推荐
- ubuntu 用法
1:改变某一个目录的拥有者 sudo chown -hR user:user ./目录名 // user:user 用户名:组名 sudo chmod 777 文件 //给文 ...
- vue开发笔记
1.一定要弄明白什么是数据驱动,以前jQuery操作dom的那种思维模式可以不去考虑,在类似框架中任何一个效果的完成都是由数据驱动来完成的. 2.以.vue作为扩展名的文件,是vue组件,他是一个类, ...
- python selenium 安装与 chromedriver安装
安装 pip install selenium 安装完成之后运行脚本,如果没报错那ok.但是很不幸运,我报错啦.(本人使用ubuntu16.04,python2,or python3) 贴出我的报错: ...
- MySQL中特有的函数CONV函数
CONV函数:用于对数字进行转换,比如将十进制的数字转化成二进制,参数格式convert(N,frombse,tobase) 将数字N从frombase进制转化成tobase进制,并且以字符串的格式返 ...
- ruby on rails validates
validates :conclusion, :presence => true, :inclusion => { :in => [0,1] } validates :email, ...
- 使用老毛桃安装Windows操作系统
首先必须知道什么是PE系统? 当电脑出现问题而不能正常进入系统时候的一种“紧急备用”系统,通常放在U盘中,设置启动项优先级,使得电脑启动的时候加载PE系统. 如何在U盘中安装老毛桃(PE工具箱)? h ...
- ZOJ 1276 Optimal Array Multiplication Sequence(矩阵连乘)
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=1276 裸的矩阵连乘问题. #include<iostream> ...
- Redis之hash数据结构实现
参考 https://www.cnblogs.com/ourroad/p/4891648.html https://blog.csdn.net/hjkl950217/article/details/7 ...
- hdu 2665 Kth number 主席树
Kth number Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Prob ...
- eclipse下maven springMVC 整合 mybatis
参考文档:http://blog.csdn.net/zhshulin/article/details/37956105 1.搭建maven工程,具体参见我另一篇博客:http://www.cnbl ...