网站使用 rel="noopener" 打开外部锚

简介: 当您的页面链接至使用 target="_blank" 的另一个页面时,新页面将与您的页面在同一个进程上运行。 如果新页面正在执行开销极大的 JavaScript,您的页面性能可能会受影响。此外,target="_blank" 也是一个安全漏洞。

当您的页面链接至使用 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

相关文章
|
8月前
|
JavaScript 前端开发
JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)
JS 下载 URL 链接文件(点击按钮、点击a标签、支持代理与非代理下载)
176 0
|
6月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
170 0
|
Web App开发 前端开发 Android开发
微信浏览器中 Input 标签 CSS 兼容性问题
微信浏览器中 Input 标签 CSS 兼容性问题
131 0
|
Web App开发 缓存 网络协议
网页页面下各种标签的含义
1、charset: 2、X-UA-Compatible: 3、canonical : 4、dns-prefetch: 5、keywords 6、viewport 7、description
136 0
|
搜索推荐 安全 索引
Confluence 6 为搜索引擎隐藏外部链接
为搜索引擎隐藏外部链接能够避免向你的站点添加垃圾信息。如果你启用了这个选项的话,任何插入到页面中的 URLs 和评论将会赋予 'nofollow' 属性,这个属性将会禁止搜索引擎进行索引。
1289 0
|
Web App开发 前端开发 JavaScript
<link>标签实现预加载功能
这就触到了本人的知识盲区了,本着扫盲的目的,研究了下 link 标签,发现这个小东西功能还是挺强大的,上面的就是为了实现预加载功能,懂点儿英文的,一看见preload 就大致知道了。
1656 0
|
前端开发
【css】设置div位于浏览器的最底层,离用户最远
有时候切换发现某块div一直悬浮在最上层,怎么设置div位于浏览器的最底层。离用户最远?    .in{ z-index: -1; } 然后引用in到你想用的div的class上即可!z-index代表图层的优先级,正数越大,离...
1107 0

热门文章

最新文章