网站使用 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标签、支持代理与非代理下载)
181 0
|
6月前
|
Web App开发 移动开发 JavaScript
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
【前端用法】HTML5 Video标签如何屏蔽右键视频另存为的js代码以及如何禁用浏览器控件,Video 禁止鼠标右键下载
175 0
|
4月前
|
JavaScript 前端开发
js怎样获取浏览器窗口尺寸
js怎样获取浏览器窗口尺寸
28 1
起个服务把静态html文件放在手机上访问
起个服务把静态html文件放在手机上访问
159 0
起个服务把静态html文件放在手机上访问
|
搜索推荐 安全 索引
Confluence 6 为搜索引擎隐藏外部链接
为搜索引擎隐藏外部链接能够避免向你的站点添加垃圾信息。如果你启用了这个选项的话,任何插入到页面中的 URLs 和评论将会赋予 'nofollow' 属性,这个属性将会禁止搜索引擎进行索引。
1289 0
|
前端开发
【css】设置div位于浏览器的最底层,离用户最远
有时候切换发现某块div一直悬浮在最上层,怎么设置div位于浏览器的最底层。离用户最远?    .in{ z-index: -1; } 然后引用in到你想用的div的class上即可!z-index代表图层的优先级,正数越大,离...
1108 0