【5】客户端容器 | 青训营笔记

110 阅读5分钟

浏览器架构

浏览器架构演进

  1. 单进程架构:所有模块运行在同一个进程里,包含网络、插件、JavaScript运行环境等

其实早在 2007 年之前,市面上浏览器都是单进程的。单进程浏览器的架构如下图所示: 1.png 如此多的功能模块运行在一个进程里,是导致单进程浏览器不稳定、不流畅和不安全的一个主要因素。

  • 不稳定 1.早期浏览器需要借助于插件来实现诸如 Web 视频、Web 游戏等各种强大的功能,但是插件是最容易出问题的模块,并且还运行在浏览器进程之中,所以一个插件的意外崩溃会引起整个浏览器的崩溃。 2.渲染引擎模块也是不稳定的,通常一些复杂的 JavaScript 代码就有可能引起渲染引擎模块的崩溃。和插件一样,渲染引擎的崩溃也会导致整个浏览器的崩溃。
  • 不流畅单线程意味着所有页面的渲染模块、JavaScript 执行环境以及插件都是运行在同一个线程中的,但同一时刻只有一个模块可以执行 如果JavaScript 执行环境中执行如下脚本: 2.png 1.因为这个脚本是无限循环的,所以当其执行时,它会独占整个线程,这样导致其他运行在该线程中的模块就没有机会被执行。因为浏览器中所有的页面都运行在该线程中,所以这些页面都没有机会去执行任务,这样就会导致整个浏览器失去响应,变卡顿。 2.除了上述脚本或者插件会让单进程浏览器变卡顿外,页面的内存泄漏也是单进程变慢的一个重要原因。通常浏览器的内核都是非常复杂的,运行一个复杂点的页面再关闭页面,会存在内存不能完全回收的情况,这样导致的问题是使用时间越长,内存占用越高,浏览器会变得越慢。
  • 不安全 1. 一个是插件,它可以使用 C/C++ 等代码编写,通过插件可以获取到操作系统的任意资源,当你在页面运行一个插件时也就意味着这个插件能完全操作你的电脑。如果是个恶意插件,那么它就可以释放病毒、窃取你的账号密码,引发安全性问题。2. 一个是页面脚本,它可以通过浏览器的漏洞来获取系统权限,这些脚本获取系统权限之后也可以对你的电脑做一些恶意的事情,同样也会引发安全问题
  1. 多进程架构:主进程、网络进程、渲染进程、GPU进程、插件进程

  2. 面向服务架构:将原来的UI、数据库、文件、设备、网络等,作为一个独立的基础服务

浏览器架构对比

架构类型扩展性安全性稳定性流畅度
单进程架构,所有模块运行在同一个进程里,访问同一块内存区域,数据没有隔离,新增模块可能会影响原有功能,三方插件可以直接访问操作系统中的任意资源,三方插件漏洞或者tab页面JavaScript脚本问题可能导致浏览器崩溃卡顿,所有页面运行在同一进程中,开启多个页面时明显卡顿
多进程架构,各进程分配独立的内存区域,有些进程功能较大,耦合度高,运行在独立沙箱中国,不能访问系统敏感资源,进程相互隔离,当一个页面或者插件崩溃时,不会影响其他进程流畅,每个页面运行在独立的渲染进程中,充分利用系统资源
面向服务架构,服务模块划分更细,更内聚、耦合性低,易于扩展,运行在独立沙箱中,不能访问系统敏感资源,进程相互隔离,当一个页面崩溃或者插件崩溃时,不会影响其他进程流畅,每个页面运行在独立的渲染进程中,充分利用系统资源

多进程分工

1.png

进程名称进程描述
浏览器(主进程)主要负责页面展示逻辑,用户交互,子进程管理;包括地址栏、书签、前进、后退、收藏夹等
GPU进程负责UI绘制,包含整个浏览器的全部UI
网络进程网络服务进程,负责网络资源加载
标签页(渲染进程)控制tab内的所有内容,将HTML、css和JavaScript转换为用户可交互的网页
插件进程控制网站运行的插件,比如flash、ModHeader等
其他进程如上图所示:使用程序storage/network/audio service等

渲染进程

常见的浏览器内核

1.png

渲染进程——多线程架构

内部是多线程实现,主要负责页面渲染,脚本执行,事件处理,网络请求等

2.png

3.png

JS引擎 VS 渲染引擎

  1. 解析执行
  2. XML解析生成渲染树,显示在屏幕
  3. 桥接的方式通信

4.png