瀏覽器工作原理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
英文地址，請注明出處：http://en.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