浏览器工作原理37 [#] 浏览上下文组：如何计算Chrome中渲染进程的个数？

一、前言

在默认情况下，如果打开一个标签页，那么浏览器会默认为其创建一个渲染进程。

如果从一个标签页中打开了另一个新标签页，当新标签页和当前标签页属于同一站点（相同协议、相同根域名）的话，那么新标签页会复用当前标签页的渲染进程。

多个标签页运行在同一个渲染进程：从标签页中打开新的标签页

在这里插入图片描述

多个标签页运行在不同的渲染进程中：新建一个标签页打开

在这里插入图片描述

二、标签页之间的连接

可以通过 window.opener 操作

1.通过标签<a>来和新标签建立连接

<a  href="https://time.geekbang.org/" target="_blank" class="">极客时间</a>

2.通过 window.open 方法来和新标签页建立连接

new_window = window.open("http://time.geekbang.org")AI写代码js
1

在 WhatWG 规范中，把这一类具有相互连接关系的标签页称为浏览上下文组 ( browsing context group)。

一个标签页所包含的内容，诸如 window 对象，历史记录，滚动条位置等信息称为浏览上下文。通过脚本相互连接起来的浏览上下文就是浏览上下文组。

规范文档
在这里插入图片描述

Chrome 浏览器会将浏览上下文组中属于同一站点的标签分配到同一个渲染进程中。

为什么它们必须运行在同一渲染进程中？

因为如果一组标签页，既在同一个浏览上下文组中，又属于同一站点，那么它们可能需要在对方的标签页中执行脚本。

计算标签页使用的渲染进程数目：

在这里插入图片描述

三、noopener 与 noreferrer

Chrome 浏览器为标签页分配渲染进程的策略：

  1. 如果两个标签页都位于同一个浏览上下文组，且属于同一站点，那么这两个标签页会被浏览器分配到同一个渲染进程中。
  2. 如果这两个条件不能同时满足，那么这两个标签页会分别使用不同的渲染进程来渲染。

例子：首先打开 linkmarket.aliyun.com 这个标签页，再在这个标签页中随便点击两个链接，然后就打开了两个新的标签页了，如下图所示：

在这里插入图片描述

A、B、C 三个标签页都属于同一站点，正常情况下，它们应该共用同一个渲染进程，不过通过上图我们可以看出来，A、B、C 三个标签页分别使用了三个不同的渲染进程。

说明这三个标签页不在同一个浏览上下文组中。

怎么验证？

可以通过控制台，来看看 B 标签页和 C 标签标签页的 opener 的值都是 null，说明 B、C 标签页和 A 标签页没有连接关系，不属于同一浏览上下文组。

实现的原理是什么？

链接使用了 rel = noopener：

在这里插入图片描述

  • noopener：告诉浏览器，通过这个链接打开的标签页中的 opener 值设置为 null
  • noreferrer：告诉浏览器，新打开的标签页不要有引用关系。

阿里为什么要把同一站点的tab签做成无连接的，会避免什么安全隐患啊？

如果多个标签在同一个进程中，那么一个标签沦陷了，其它标签都会沦陷的

更多可以参考：nofollow、noopener和noreferrer标签的区别

1.什么是 noreferrer 标签？

简而言之，noreferrer 标记在单击链接时隐藏引用者信息。如果有人从使用此标记的链接到达您的网站，您的分析将不会显示谁提到该链接。相反，它会错误地显示为您的统计流量报告中的直接流量。

这个 noreferrer 标签在 WordPress 早些版本中是自动添加到 A 标签中，但实际上这并不是 WordPress 本身所做的改变，而是由 WordPress 使用的富文本编辑器 TinyMCE（WordPress 默认编辑器）造成的。目的就是防止网络钓鱼攻击，垃圾邮件发送者劫持您的网页，可能会访问您的网站或访问机密信息。不过现在 TinyMCE 只强制插入 noopener 标签，已经不会强制插入“noopener noreferrer”标签。

2.什么是 noopener 标签？

rel =“noopener” 在新标签中打开链接时基本上不会打开它的开启者。这意味着，它的 window.opener 属性将是在新标签中打开一个链接时，而不是从那里的链接打开同一个页面为空。

rel =“noopener” 一般都是搭配 target=“_blank"同时使用，因为 target=”_blank" 也是一个安全漏洞：新的页面可以通过 window.opener 访问您的窗口对象，并且它可以使用 window.opener.location = newURL 将您的页面导航至不同的网址。新页面将与您的页面在同一个进程上运行，如果新页面正在执行开销极大的 JavaScript，您的页面性能可能会受影响。

3.什么是 nofollow 标签？

nofollow 标签就是告诉百度、Google 等搜索引擎不要通过使用此标记的链接传递任何值。大多数情况下，nofollow 标签用于阻止“PageRank”传递到网站上的管理页面（例如，您不需要排名的登录页面），或者根据 Google 的付费使用广告客户的 URL 链接政策。除了用于付费和管理链接之外，nofollow 标记通常用于限制 PageRank 通过博客评论或留言簿条目中的链接传递。在链接到信誉或可信度可能成为问题的网站时，您也可以使用 nofollow。

4.noopener 和 noreferrer 标签如何提高安全性？

noopener 和 noreferrer 标签是阻止漏洞利用的主动权，该漏洞利用在新标签中打开的链接。很少有成员知道这个漏洞，因此 WordPress 采取这一举措来提高用户的安全性。反向 Tabnabbing 是一种网络钓鱼攻击，攻击者用恶意文档替换合法且可信的页面选项卡。

当有人打开新选项卡时，网络钓鱼者会通过 window.opener 检测引荐网址，并使用 window.opener.location = newURL 推送新的网址。

这样，没有人会有陷入网络钓鱼攻击的线索，因为他们已经从可靠的来源（WordPress 建立的网站）到达网站。而使用 rel =“noopener”会阻止网络钓鱼者获取有关链接源和与 referrer 链接相关的任何数据的信息。

5.nofollow、noopener 和 noreferrer 标签对SEO 有什么影响？

这是许多博主站长们关心的问题，因为大家都知道 nofollow 标签会影响 Google 等搜索引擎的抓取和索引链接以及传递 PageRank 的能力，所以大家都比较担心 noopener 标签和 noreferrer 标签也会这样做。

其实，noopener 标签和 noreferrer 标签对 SEO 没有任何影响。简而言之，它们运行在分析/浏览器级别，而不是搜索引擎级别。虽然在监控反馈流量方面存在严重问题，但它不会影响站点内容的索引、抓取或排名方式。

四、站点隔离

目前 Chrome 浏览器已经默认实现了站点隔离的功能，这意味着标签页中的 iframe 也会遵守同一站点的分配原则。如果 iframe 和标签页不属于同一站点，那么 iframe 会运行在单独的渲染进程中。

例子：

<!DOCTYPE html>
<html lang="en">
<head><title>站点隔离:demo</title><style>iframe {width: 800px;height: 300px;}</style>
</head>
<body><div><iframe src="iframe.html"></iframe></div><div><iframe src="https://www.infoq.cn/"></iframe></div><div><iframe src="https://geekbang.org/"></iframe></div><div><iframe src="https://meiqia.com/"></iframe></div>
</body>
</html>

iframe 使用单独的渲染进程：

在这里插入图片描述

计算 iframe 所使用的渲染进程数目：

在这里插入图片描述

  1. InfoQ、极客邦两个 iframe 与父标签页不属于同一站点，所以它们会被分配到不同的渲染进程中
  2. iframe.html 和源标签页属于同一站点，所以它会和源标签页运行在同一个渲染进程中。

五、总结

首先使用两种不同的方式打开两个标签页，第一种是从 A 标签页中通过链接打开了B 标签页，第二种是分别打开 A 和 B 标签页，这两种情况下的 A 和 B 都属于同一站点。

通过 Chrome 的任务管理器我们发现，虽然 A 标签页和 B 标签页都属于同一站点，不过通过第一种方式打开的 A 标签页和 B 标签页会共用同一个渲染进程，而通过第二种方式打开
的两个标签页却分别使用了两个不同的渲染进程。
这是因为，使用同一个渲染进程需要满足两个条件：首先 A 标签页和 B 标签页属于同一站点，其次 A 标签页和 B 标签页需要有连接关系。

接着，分析了一个“例外”，如果在链接中加入了 rel=noopener 属性，那么通过链接打开的新标签页和源标签页之间就不会建立连接关系了。

最后我们还分析了站点隔离对渲染进程个数的影响，如果 A 标签页中的 iframe 和 A 标签页属于同一站点，那么该 iframe 和 A 标签页会共用同一个渲染进程，如果不是，则该iframe 会使用单独的渲染进程。

到了这里相信你已经会计算渲染进程的个数了。在最后我们还要补充下同源策略对同一站点的限制，虽然 Chrome 会让有连接且属于同一站点的标签页运行在同一个渲染进程中，不过如果 A 标签页和 B 标签页属于同一站点，却不属于同源站点，那么你依然无法通过 opener 来操作父标签页中的 DOM，这依然会受到同源策略的限制。

简单地讲，极客邦和极客时间属于同一站点，但是他们并不是同源的，因为同源是需要相同域名的，虽然根域geekbang.org 相同，但是域名却是不相同的，一个是time.geekbang.org，一个是 www.geekbang.org， 因此浏览器判断它们不是同源的，所以依然无法通过 time.geekbang.org 标签页中的 opener 来操作 www.geekbang.org 中的 DOM。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/87711.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/87711.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

位置编码和RoPE

位置编码和RoPE

前言 关于位置编码和RoPE 应用广泛&#xff0c;是很多大模型使用的一种位置编码方式&#xff0c;包括且不限于LLaMA、baichuan、ChatGLM等等 第一部分 transformer原始论文中的标准位置编码 RNN的结构包含了序列的时序信息&#xff0c;而Transformer却完全把时序信息给丢掉了…
阅读更多...
手动使用 Docker 启动 MinIO 分布式集群（推荐生产环境）

手动使用 Docker 启动 MinIO 分布式集群（推荐生产环境）

在生产环境中&#xff0c;MinIO 集群通常部署在多个物理机或虚拟机上&#xff0c;每个节点运行一个 MinIO 容器&#xff0c;并通过 Docker 暴露 API 和 Console 端口。 1. 准备工作 假设有 4 台服务器&#xff08;也可以是同一台服务器的不同端口模拟&#xff0c;但不推荐生产…
阅读更多...
如何在IntelliJ IDEA中设置数据库连接全局共享

如何在IntelliJ IDEA中设置数据库连接全局共享

在现代软件开发中&#xff0c;数据库连接管理是开发过程中不可或缺的一部分。为了提高开发效率&#xff0c;减少配置错误&#xff0c;并方便管理&#xff0c;IntelliJ IDEA 提供了一个非常有用的功能&#xff1a;数据库连接全局共享。通过这个功能&#xff0c;你可以在多个项目…
阅读更多...
【Python】文件应用: 查找读取的文件内容

【Python】文件应用: 查找读取的文件内容

查找读取的文件内容 from pathlib import Pathpath Path(pi_million_digits.txt) contents path.read_text()lines contents.splitlines() pi_string for line in lines:pi_string line.lstrip()birthday input("Enter your birthday, in the form mmddyy: "…
阅读更多...
交互式剖腹产手术模拟系统开发方案

交互式剖腹产手术模拟系统开发方案

以下是为您设计的《交互式剖腹产手术模拟系统》开发方案框架，包含技术实现路径与详细内容结构建议。由于篇幅限制，这里呈现核心框架与关键模块说明： 交互式剖腹产手术模拟系统开发方案 一、项目背景与意义 1.1 传统医学教学痛点分析 尸体标本成本高昂（约$2000/例）活体训…
阅读更多...
AWS WebRTC: 判断viewer端拉流是否稳定的算法

AWS WebRTC: 判断viewer端拉流是否稳定的算法

在使用sdk-c viewer端进行拉流的过程中&#xff0c;viewer端拉取的是视频帧和音频帧&#xff0c;不会在播放器中播放&#xff0c;所以要根据收到的流来判断拉流过程是否稳定流畅。 我这边采用的算法是&#xff1a;依据相邻帧之间的时间间隔是否落在期望值的 20% 范围内。 音频…
阅读更多...
【Python】文件读取：逐行读取应用实例——从一个JSONL文件中逐行读取文件

【Python】文件读取：逐行读取应用实例——从一个JSONL文件中逐行读取文件

从一个JSONL文件中逐行读取文件&#xff0c;并将这些问题保存到一个新的JSONL文件中 import json import argparse import os # 导入os模块用于检查文件是否存在def read_questions_from_jsonl(file_path, limit):"""从JSONL文件中读取指定数量的question部分…
阅读更多...
百宝箱生成智能体

百宝箱生成智能体

点击新建应用 工作流如下&#xff1a; 点击发布 点击Web服务&#xff0c;上架
阅读更多...
嵌入式 数据结构学习(五) 栈与队列的实现与应用

嵌入式 数据结构学习(五) 栈与队列的实现与应用

一、栈(Stack)详解 1. 栈的基本概念 栈的定义与特性 后进先出(LIFO)&#xff1a;最后入栈的元素最先出栈 操作限制&#xff1a;只能在栈顶进行插入(push)和删除(pop)操作 存储位置&#xff1a;我们实现的链栈位于堆区(malloc分配)&#xff0c;系统栈区存储函数调用信息 栈…
阅读更多...
汇编与接口技术：8259中断实验

汇编与接口技术：8259中断实验

一、实验目的 该实验使学生掌握8259向量中断方式的硬件连接和软件编程的方法&#xff0c;同时使同学掌握中断和其它接口芯片配合来完成某一特定任务的方法。 二、实验内容 1、手动产生单脉冲作为中断请求信号连接到MIRQ3上和SIRT10上。每按一次开关产生一次中断&#xff0c;…
阅读更多...
Ajax的初步学习

Ajax的初步学习

一、什么是 Ajax&#xff1f; Ajax (Asynchronous JavaScript and XML) 是一种无需重新加载整个网页的情况下&#xff0c;能够更新部分网页的技术。通过在后台与服务器进行少量数据交换&#xff0c;Ajax 可以使网页实现异步更新。 主要特性&#xff1a; 异步性 (Asynchronous…
阅读更多...
OOM电商系统订单缓存泄漏，这是泄漏还是溢出

OOM电商系统订单缓存泄漏，这是泄漏还是溢出

电商系统订单缓存泄漏的本质分析一、明确概念区别内存泄漏&#xff08;Memory Leak&#xff09;定义&#xff1a;对象已经不再被使用&#xff0c;但由于被错误引用而无法被垃圾回收特点&#xff1a;内存使用量随时间持续增长&#xff0c;最终可能导致OOM类比&#xff1a;像浴缸…
阅读更多...
二进制安全-汇编语言-02-寄存器

二进制安全-汇编语言-02-寄存器

二、寄存器 水滴石穿 一个典型的CPU由运算器、控制器、寄存器等器件构成&#xff0c;这些器件靠内部总线相连 内部总线实现CPU内部各个器件之间的联系&#xff0c;外部总线实现CPU和主板上其他器件的联系 简单说&#xff0c;在CPU中&#xff1a; 运算器进行信息处理寄存器进…
阅读更多...
Java——初始guava（1）

Java——初始guava（1）

基于 Google Guava 官方教程的解答 📚 Guava 提供了哪些 JDK 不具备的 API？ Guava 扩展了 JDK 的集合框架，提供了多种 JDK 没有的实用 API： 不可变集合（Immutable Collections） ImmutableList、ImmutableSet、ImmutableMap 等特性：创建后不可修改，线程安全，性能优于…
阅读更多...
day53

day53

import torch import torch.nn as nn import torch.optim as optim from torch.utils.data import DataLoader, TensorDataset import numpy as np from sklearn.preprocessing import MinMaxScaler from sklearn.datasets import load_iris import warnings # 忽略不必要的警…
阅读更多...
c++ python 共享内存

c++ python 共享内存

一、目的 是为了c来读取并解码传递给python&#xff0c;Python做测试非常方便&#xff0c;c 和 python之间必须定好协议&#xff0c;整体使用c 来解码&#xff0c;共享内存传递给python 二、主类 主类&#xff0c;串联decoder&#xff0c;注意decoder并没有直接在显存里面穿…
阅读更多...
react函数组件的props，ref，state。

react函数组件的props，ref，state。

react开发我们会把页面分为一个个组件&#xff0c;组件是独立而且可复用的重复代码片段。具体来说组件可以是一个按钮&#xff0c;一个输入框。react组件有两种定义方法&#xff0c;一种是函数组件&#xff0c;一种是类组件。我们这里说一下函数组件之间父子之间如何传递props参…
阅读更多...
基于ARM+FPGA实现的BISS-C协议解决方案，适用于高精度光栅位移传感器等

基于ARM+FPGA实现的BISS-C协议解决方案，适用于高精度光栅位移传感器等

模块简介 本资源提供了专为FPGA设计的BISS-C接口协议发送模块源码。BISS-C模式作为一种高速、同步的串行通信协议&#xff0c;广泛应用于高精度光栅位移传感器的数据传输中&#xff0c;特别适用于需要精确位置信息的应用场景。此模式遵循主从架构&#xff0c;其中FPGA作为主控制…
阅读更多...
spring中@Transactional注解和事务的实战理解附代码

spring中@Transactional注解和事务的实战理解附代码

文章目录 前言一、事务是什么&#xff1f;二、事务的特性2.1隔离性2.2事务的隔离级别 三、Transactional注解Transactional注解简介基本用法常用属性配置事务传播行为事务隔离级别异常处理与回滚性能优化建议 四、 事务不生效的可能原因方法访问权限非public自调用问题异常被捕…
阅读更多...
替代进口SCA7606【智芯微】国产高精度电流传感器 工业新能源电网专用

替代进口SCA7606【智芯微】国产高精度电流传感器 工业新能源电网专用

SCA7606&#xff08;智芯微&#xff09;产品解析与推广文案一、产品概述SCA7606 是 智芯微电子&#xff08;ZXMICRO&#xff09; 推出的一款 高精度数字隔离式电流传感器芯片&#xff0c;采用 霍尔效应数字输出 技术&#xff0c;专为 工业控制、新能源、智能电网 等领域的电流检…
阅读更多...
最新文章

Copyright @ 2022~2023