网站使用 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

相关文章
|
小程序
小程序-uniapp:实现锚点连接/锚点跳转
小程序-uniapp:实现锚点连接/锚点跳转
912 0
文本,vitepress如何实现路由跳转,你可以在文件夹中设置多个md文件,然后在nav的link文件下使用匹配相应路径,就可以实现跳转了
文本,vitepress如何实现路由跳转,你可以在文件夹中设置多个md文件,然后在nav的link文件下使用匹配相应路径,就可以实现跳转了
|
10月前
|
前端开发 容器
五种css溢出隐藏的方法----亲测可用
五种css溢出隐藏的方法----亲测可用号。
208 0
|
Web App开发 移动开发 安全
如何阻止 iframe 里引用的网页自动跳转
如何阻止 iframe 里引用的网页自动跳转
228 0
div层定位在网页右下角
div层定位在网页右下角
96 0
往 p 标签里放了个 div,把浏览器都给整不会了
块级元素: 不管内容多少,块元素都会在浏览器中独占一行。可设置宽高,如果不设置宽高那么它的宽度是100%(占满父级元素一整行)
122 0
往 p 标签里放了个 div,把浏览器都给整不会了
|
区块链 UED
网站增加一个ICO站点小图标教程
对于网站的管理员来说,网站的ICO图标更准确的应该叫做站标,是仅次于网站LOGO的标志之一。高品质的ico图标设计更容易使站点获取良好的用户体验。制作ICO图标的工具尽管有很多,但做出一款漂亮的ICO图标,并非是一件容易的事情。
366 0
网站增加一个ICO站点小图标教程
|
搜索推荐 安全 索引
Confluence 6 为搜索引擎隐藏外部链接
为搜索引擎隐藏外部链接能够避免向你的站点添加垃圾信息。如果你启用了这个选项的话,任何插入到页面中的 URLs 和评论将会赋予 'nofollow' 属性,这个属性将会禁止搜索引擎进行索引。
1330 0
fbh
|
UED SEO
最肤浅的利于seo 网站编辑(img标签alt属性)
图片img标签alt属性对seo有影响!   1.图片alt属性标签可以用来告知搜索引擎,这张图片放在这里是与文章主题相关的。
fbh
1386 0
|
前端开发
【css】设置div位于浏览器的最底层,离用户最远
有时候切换发现某块div一直悬浮在最上层,怎么设置div位于浏览器的最底层。离用户最远?    .in{ z-index: -1; } 然后引用in到你想用的div的class上即可!z-index代表图层的优先级,正数越大,离...
1161 0