《WebKit 技术内幕》之三(2): WebKit 架构和模块

2.基于 Blink 的 Chrominum 浏览器结构
2.1 Chrominum 浏览器的架构及模块

        Chromium也是基于WebKit(Blink)开发的,并且在WebKit的移植部分中,Chromium也做了很多有趣的事,所以通过Chromium可以了解如何基于WebKit构建浏览器。,更进一步说,chromium也做了很多技术创新,将很多先进的理念引入到浏览器领域。

(1)从架构上看,WebKit(Blink)只是其中的一块,,还包括GPU/CommandBuffer(硬件架构)、V8 JavaScript引擎、沙箱模型、CC(Chromium Compositor)、IPC、UI等。

  • GPU/Command Buffer ,硬件加速架构
  • Content 模块、Content 接口(API):Chromium 对渲染网页功能的抽象,将下面的渲染、安全、插件机制隐藏起来,提供一个接口层(供上层模块或其他项目使用)。也可以在 WebKit 的 Chromium 移植上渲染网页内容(无法获取 Content 层中实现的沙箱模型、跨进程的 GPU 硬件加速机制等)
  • Content Shell:使用 Content API 来包装的一层简单的壳,用户可以使用 Content 模块来渲染和显示网页内容。作用可以用来测试 Content 模块很多功能的正确性,也可以作为一种外部项目开发的参考
  • Android WebView:利用 Chromium 实现来替换原来 Android 默认的 WebView


          “Content模块”和“Content API(接口)”,是对渲染网页功能的抽象,“Content”的本意是指网页的内容,这里是指用来渲染网页内容的模块。这个渲染与WebKIt(Blink)的渲染功能的区别是,后者没有办法获得沙箱模型、跨进程的GPU硬件加速机制、众多的HTML5功能。因为这些都是在 Content 层里实现的。

      “Content模块”和“Content API”将下面的渲染机制、安全机制和插件机制等隐藏起来,提供一个接口层。该接口层被内部的 Chrominum 浏览器、Content Shell等调用,外部被CEF(Chromium Embedded Framework)、OPera浏览器调用。

        Chrominum 浏览器和 Content Shell 是构建在 Content API之上的两个浏览器。 Chrominum 浏览器是具有完整功能的浏览器;而Content Shell是一个简单的“壳”的浏览器,使用content模块来渲染和显示网页内容,其作用是测试content模块很多如渲染、硬件加速等功能的正确性,另外是一个参考,可以被很多外部项目参考来开发基于“Content API”的浏览器或者各种类型的项目。

        在Andriod系统上,Content Shell的作用更大,因为chromium浏览器的部分代码并没有开源,只能依赖Content Shell。最右边的 Andriod WebView,是为了满足Android系统上的WebView而设计的,其思想是利用Chromium的实现来替换原来的Andriod系统默认的WebView。

(2)多进程模型

        在WebKIt内核之上,Chromium率先引进多进程模型。多进程不可避免带来一些问题和复杂性,但可以带来以下三点好处:

  •  避免因单个页面的不响应或者崩溃而影响整个浏览器的稳定性,特别是对用户界面的影响。
  • 当第三方插件崩溃时,不会影响页面或者浏览器的稳定性,这时因为第三方插件也被使用单独的进程来运行。
  • 方便安全模型的实施,也就是说沙箱模型是基于多进程架构的。

        图中给出了Chromium浏览器器常用的多进程模型,因为其架构的灵活性,可以为使用者提供通过简单的设置来随意改变进程的模型方式,图中方框代表进程,连线代表IPC进程间的通信,没有连线的表明不同类型进程之间没有通信,如NPAPI插件和GPU之间就没有通信,这是因为NPAPI是早期的插件标准,它没有定义使用GPU加速的接口。

  • Browser 进程:浏览器主进程,负责浏览器界面的显示、各个页面的管理,是所有其他类型进程的祖先,负责它们的创建和销毁等工作,有且仅有一个。
  • Renderer 进程:网页的渲染进程,负责页面的渲染工作,Blink/WebKit 的渲染工作主要在这个进程中完成,Renderer 进程数量不一定与用户打开页面的数量一致:且在沙箱模型启动的情况下,该进程可能会发生一些变化。
  • NPAPI 插件进程:该进程是为 NPAPI 类型的插件而创建,原则是每种类型的插件只会创建一次,而且仅当使用时才被创建,有多个网页需要使用同一类型的插件的时候,插件进程会为每个使用者创建一个实例,即插件进程是被共享的。
  • GPU 进程:最多只有一个,当且仅当 GPU 硬件加速打开的时候才会被创建,主要用于对 3D 图形加速调用实现。
  • Pepper 插件进程: 同 NPAPI 插件进程,为 Pepper 插件而创建。
  • 其他类型的进程:如 Linux 下的 Zygote 进程(创建 Renderer 进程)、Sandbox 准备进程(安全机制)

Chrominum 多进程模型特征:

  • Browser 进程和页面的渲染时分开的,页面渲染进程的崩溃不会导致浏览器主界面的崩溃
  • 每个网页是独立的进程,这保证了页面之间相互不影响
  • 插件进程也是独立的,插件本身的问题不会影响到网页和主界面
  • GPU 硬件加速进程也是独立的,且只有一个 GPU 进程

        而在 Android 平台上,目前版本不支持插件,所以没有插件今年成,GPU 进程演变成 Borwser 进程的一个GPU线程,可以节省资源;Renderer进程会演变成服务(Service)进程。由于 Android 系统的局限性,Rneder 进程的数目会被严格限制,所以移动端浏览器引入了“影子”标签的概念,移动端浏览器会将后台的网页所使用的渲染设施都清除,当用户再次切换回来的时候,网页需要重新加载和渲染

  • process-per-site-instance:每一个页面都创建一个独立的 Renderer 进程,不管这些页面是否属于同一个域。这样好处是每个页面互相不影响,但是会造成资源的浪费。
  • process-per-site:属于同一个域的页面共享同一个进程,不属于同一个域的页面分属不同的进程,这样的好处是进程可以共享,内存消耗相对小,但是副作用是导致Renderer进程特别大。
  • process-per-tab:chromium的默认行为,无论是不是不同域不同实例,每个标签页都创建一个独立进程(Chromium 默认行为),会造成资源浪费。
  • single process:不为页面创建任何独立的进程,所有渲染工作都在 Browser 进程中的多个线程中进行,这个属于实验性质且稳定性差,只有在比较单进程和多进程对比时才使用。在Andriod WebView中,该模式被采用。  

(3)Browser 进程和 Renderer进程

        Browser进程和Renderer进程都是在WebKit的接口之外由Chromium引入的,其如何利用WebKit渲染网页见下图所示:


        最下面的时WebKit接口层,一般是基于Webkit接口层的浏览器直接在上面构建,而没有引入复杂的多进程机构。

          Webkit 黏附层的出现主要是因为 Chrominum 中的一些类型和 Webkit 内部不一致,所以需要一个简单的桥阶层
        Render 进程主要处理进程间通信,接受来自 Browser 进程的请求,并调用相应的 Webkit 接口层。同时,将 Webkit 的处理结果发送回去
        在 Browser 进程中,与 Render 进程相应的就是 RenderHost,其目的是处理同 Render 进程之间的通信,用来给 Render 进程发送请求并接收来自 Render 进程的结果

        Web Contents表示是就是网页的内容,网页由多个需要绘制的内容,同时包括显示网页内容的一个子窗口(在桌面系统上),这个子窗口最后被嵌入浏览器的用户界面,作为i它的一个标签页。
(4)多线程模型
       每个进程内部都有很多线程,对于 Browser 进程,多线程的目的主要是为了保持用户界面的高度响应,保证 UI(Browser 主线程)线程不会被其他费时的操作阻碍从而影响对用户操作的响应。而在 Render 进程中,Chrominum 则不让其他操作阻止渲染线程的快速运行,为了利用多核的优势,Chromium将渲染过程管线化,这样可以让渲染的不同阶段在不同线程执行。

网页渲染的过程在进程模型中的工作方式如下:

  • Browser 进程收到用户的请求,首先有 UI 线程处理,而且将相应的任务给 IO 线程,IO 线程随即将该任务传递给 Render 进程
  • Render 进程的 IO 线程经过简单的解释后交给渲染线程。渲染线程接受请求,加载网页并渲染网页,这其中可能需要 Browser 进程获取资源和需要 GPU 进程来帮助渲染。最后 Render 进程将结果由 IO 线程传递给 Browser 进程
  • 最后,Browser 进程接收到结果并将结果绘制出来

(5) Content 接口

        Content 接口提供了一层对多进程进行渲染的抽象接口,其目标是要支持所有的 HTML5 功能、GPU 硬件加速功能和沙箱机制,这可以让 Content 接口的使用者们不需要很多的工作即可得到强大的能力
        Content 接口的相关代码按照功能分成六个部分,每个部分的接口一般可分成两类,第一类是调用者(Chrominum 浏览器、CEF3和Content Shell等)调用的接口,另一类是调用者应该实现的回调接口,被 Content 接口的内部实现所调用,用来参与具体实现的逻辑或者事件的监听等。

  • App:这部分主要与应用程序或者进程的创建和初始化相关,它被所有的进程使用,用来处理一些进程的公共操作,具体包括两种类型,第一类主要包括进程创建的初始化函数,也就是Content模块的初始化和关闭动作;第二类主要是各种回调函数,用来告诉嵌入者启动完成,进程启动、退出,沙盒模型初始化开始和结束等。
  • Browser:同样包含两类,第一类包括对一些HTML5功能和其他一些高级功能实现的参与,因为这些实现需要Chromium的不同平台的实现,同时需要如:Notification、Speech recognition、Web worker、Download、Geolocation等这些Content层提供的接口,Content模块需要调用它们来实现HTML5功能。第二类中的典型接口类是ContentBrowserClient,主要是实现部分的逻辑,被Browser进程调用,还有就是一些事件的函数回调。
  • Common:主要定义一些公共接口,这些被Renderer和Browser共享,如一些进程相关、参数、GPU相关等。
  • Plugin:仅有一个接口类,通知嵌入者Plugin进程何时被创建。
  • Renderer:该部分包括两类,第一类包含获取RenderThread的消息循环、注册V8 Extension、计算JavaScript表达式等;第二类包括ContentRendererClient,主要是实现部分逻辑,被Browser端(或者进程)调用,还有就是一些事件的函数回调。
  • Utility:工具类接口,主要包括让嵌入者与Content接口中的线程创建和消息的过滤。


2.2 实践:从Chromium代码结构和运行状态理解现代浏览器

(1)Chrominum Content 接口代码结构
        Chromium引入了很多新的特性和功能,除了浏览器外还包括了ChromiumOS和Chrome Frame,这也是新颖的地方。ChromiumOS 就是一个基于Web的操作系统,仅支持Web网页和Web应用程序;Chrome Frame提供一个基于WebKit和Content支持的HTML5的插件。

     在上图中的目录,省略了”third_party“,该目录保存了Chromium所依赖的所有第三方开源项目。因为Chromium提供了很多新的特性和功能,这些功能需要很多库来支持,而且这些特性和功能会存在一些不足或者Chromium有特定的需求,所以,Chromium的做法把超过150个项目包含进来,也就是Blink代码页被包含其中。

      在目录的后面对代码的功能进行了简单的标注说明,都很简明扼要。重点描述的是Content目录。Content的接口主要在”public“目录中,它包含的目录也是按照进程类型来划分的。

(2)Chromium多进程

        通过Chome浏览器和操作系统提供的进程管理工具查看进程情况(略)

(3)Chromium多线程

        通过Chome浏览器和操作系统提供的线程管理工具查看进程情况(略)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/329106.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【SpringBoot】Bean 是什么?

感兴趣的话,可以看我另外一篇关于 Bean 的文章:【Java基础】Spring 中 Bean 的理解与使用 一、Bean 定义 Bean 作为 Spring 框架面试中不可或缺的概念,其本质上是指代任何被 Spring 加载生成出来的对象。(本质上区别于 Java Bea…

迪文串口屏屏幕界面制作软件T5L_DGUS Tool\\DGUS_V7647的使用

一、概述 使用迪文串口屏要首先用屏幕界面制作软件T5L_DGUS Tool制作界面,然后在直面上设置变量,变量对应有地址。单片机可以使用串口发送数组,数组为迪文屏的控制指令,比如写数据指令,该指令中有变量的地址&#xff0…

k8s创建资源对象过程

我们都知道,K8S中一切皆资源,在使用K8S时,所有的pod或者controller都是通过yaml文件进行创建的。 那么接下来,就和大家一起看一下K8S是如何创建资源的。 创建资源对象的过程 Deployment是一种常见的资源对象。在Kubernetes系统…

低代码-详情页组件设计

效果图 详情页数据结构定义 layout:{// 按钮数据buttonLayout:{headButton:[], // 页头按钮footButton:[] // 页脚按钮},// 详情页表单配置config:{}, // 配置组件列表detailLayout:[]}默认行为 进表单初始化,只展示表单属性,隐藏通用、数据、事件tab项…

springboot第50集:File类,IO流,网络编程,反射机制周刊

image.png FileReader、FileWriter的使用 FileInputStream、FileOutputStream的使用 image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png image.png 服务器内存优化是一个复杂的过程,通常需要综合考虑…

存储系统——Ceph

目录 存储基础 单机存储设备 单机存储的问题 分布式存储(软件定义的存储 SDS) 分布式存储的类型 Ceph 概述 Ceph 优势 Ceph 架构 RADOS 基础存储系统 LIBRADOS 基础库 高层应用接口 应用层 Ceph 核心组件 OSD(Object Storage D…

实现歌词滚动效果

文章目录 需求源码 需求 有一段音频和一个字符串格式的歌词&#xff0c;现欲将二者结合做到歌词随音乐播放歌词滚动的效果&#xff0c;如下图所示 源码 目录结构 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8&…

windows PyCharm远程同步Linux服务器上的项目文件,以及远程连接Linux服务器上的python环境

&#xff08;1&#xff09;上传项目文件到Linux服务器和前置说明 &#xff08;1-1&#xff09;本地项目文件地址&#xff1a;D:\Python_Work\XXX &#xff08;1-2&#xff09;阿里云服务器项目文件地址&#xff1a;/home/XXX &#xff08;1-3&#xff09;Pycharm必须是专业版…

杨中科 .NETCORE EFCORE第七部分 一对一,多对多

一对一 一对一关系配置 1、builder.HasOne(o >o.Delivery).WithOne(d>d.Order).HasForeignKey(d>dOrderId); 2、测试插入和获取数据 示例 新建 Order 新建 Delivery DeliveryConfig OrderConfig 执行 迁移命令 查看数据库 测试数据插入 运行查看数据 多对多…

Qt中ComboBox的简单使用

1.相关说明 combobox中item的文字、data、图片设置 2.界面绘制 3.相关主要代码 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete …

怎么修改或移除WordPress后台仪表盘概览底部的版权信息和主题信息?

前面跟大家分享『WordPress怎么把后台左上角的logo和评论图标移除&#xff1f;』和『WordPress后台底部版权信息“感谢使用 WordPress 进行创作”和版本号怎么修改或删除&#xff1f;』&#xff0c;其实在WordPress后台仪表盘的“概览”底部还有一个WordPress版权信息和所使用的…

【Python笔记】pip intall -e命令:让你的工程直接使用开源包的源码,可断点调试,修改源码!

最近学习MetaGPT&#xff0c;用到了 pip install -e . 安装命令&#xff0c;这个安装命令是从源代码安装包。 从源代码安装包有几个好处&#xff1a; 包内的代码是可见的&#xff0c;是白盒&#xff0c;不是黑盒&#xff0c;可以直接在项目中看源码断点调试可以直接断到源码里…

看看通义天问AI的水平怎么样?

写在前面 我问了通义千问一个问题&#xff1a;gooey项目改名后的新名字是什么&#xff1f; 这个问题很模糊&#xff0c;它把gooey理解为一个python库&#xff0c;这很正常&#xff0c;毕竟该项目知名度大。 随着对话的进展&#xff0c;我补充了相关信息&#xff0c;将上下文领…

QT软件在线安装与维护

一.安装 安装QT开发环境分离线安装和在线安装两种方式&#xff0c;具体步骤如下&#xff1a; QT官网注册账号----下载安装包-----安装-----选择要安装的版本与开发包----版本维护 注意&#xff1a;Qt5.14.2是最后提供二进制安装包的版本&#xff0c;后面的版本都需要在线安装…

力扣hot100 爬楼梯 线性DP

Problem: 70. 爬楼梯 复杂度 时间复杂度: O ( n ) O(n) O(n) Code class Solution {public int climbStairs(int n){int[] f new int[n 1];f[0] 1;f[1] 1;for (int i 2; i < n; i)f[i] f[i - 1] f[i - 2];return f[n];} }

保证Kafka消息有序性

一、Kafka特性 写入同一个partion分区中的数据是一定有顺序的kafka中一个消费者消费一个partion的数据&#xff0c;消费者取出数据时&#xff0c;也是有顺序的 二、保证消息Kafka消息有序性 在生产者端&#xff0c;应保证消息被写入同一分区。可以在构造消息时指定消息的key…

【技术科普】四大主流芯片架构及其主要优势!

在“算力时代”&#xff0c;数字经济蓬勃发展下数据量呈现爆发式增长&#xff0c;数据价值凸显&#xff0c;从数据的产生到数据的传输、再到计算、处理&#xff0c;都离不开计算芯片&#xff0c;影响着计算芯片的芯片架构到底是什么&#xff1f;有什么作用&#xff1f;今天我们…

Springboot使用参数解析器HandlerMethodArgumentResolver,解析请求头里的数据

HandlerMethodArgumentResolver 是 Spring MVC 中的一个接口&#xff0c;它允许你自定义方法参数的解析过程。当处理请求时&#xff0c;Spring MVC 需要将请求中的信息映射到控制器方法的参数上&#xff0c;而 HandlerMethodArgumentResolver 允许你在这个过程中进行自定义操作…

群晖搭建LDAP服务器实现一个账号登录DSM、Gitea、jellyfin

文章目录 前言安装LDAP Server新建群组新增用户 DSM加入LDAPDSM使用LDAP登录 Gitea配置登录取消其登录权限 Jellyfin配置登录 总结 前言 LDAP&#xff08;轻量级目录访问协议&#xff09;是一种用于访问和管理分布式目录服务的协议&#xff0c;它具有以下好处&#xff1a; 集…

【USTC】verilog 习题练习1-5

1 编写 Verilog 代码&#xff0c;使电路输出信号1 输入格式 无输入 输出格式 输出1&#xff0c;位宽为1 module top_module(output out );// Write your code hereassign out 1; endmodule 2编写 Verilog 代码&#xff0c;使电路输出信号0 输入格式 无输入 输出格式 …