客户端容器

浏览器架构

浏览器架构演进

1. 单进程架构: 所有模块运行在同一个进程里,包含网络、插件、JavaScript运行环境等
2. 多进程架构: 主进程、网络进程、渲染进程、GPU进程、插件进程
3. 面向服务架构: 将原来的UI、数据库、文件、设备、网络等作为一个独立的基础服务

浏览器架构对比

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

任务管理器

多进程分工

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

问题

• 为什么会有单进程架构

  主要受硬件限制,早期内存昂贵,每个进程都会有基础框架,会占一些系统资源,单进程架构会节约资源

• 面向服务架构是否会替代多进程架构

  长期来看会替代

渲染进程

常见浏览器内核

内核	浏览器	JS引擎	补充说明
Trident	IE4-11	JScript,Chakra	出生于1994年,IE8以前使用JScript引擎,IE9开始使用Chakra引擎
Gecko	Firefox	SpiderMonkey	Gecko内核主要用在Firefox浏览器上,同时是一个跨平台的内核,支持在Windows、BSD、Linux、Mac OS X中使用
Webkit	Safari、Chrome、Android浏览器	JavaScriptCore	由Apple公司技术团队开发,并在2005年开源
Blink	Chrome,Opera	V8	Google基于Webkit开发的内核,在Webkit的基础上加入多进程,沙箱等技术,与2013年开源
Edge	Edge	Chakra	2015年由微软发布,用于Edge浏览器上,由于性能较差,运行不稳定等原因,2018年微软将Edge浏览器内核迁移到Chromium
Trident+Webkit(Blink)	国产浏览器QQ、360、搜狗、UC等	都有	早期银行系统都是在IE上进行开发,想要支持银行系统就切换到Trident内核,想要体验就切到Webkit内核

多线程架构

多线程架构主要负责页面渲染,脚本执行,事件处理,网络请求等

线程	功能
JS引擎	负责解析js脚本,运行js程序,每个渲染进程下面只有一个js引擎线程.与GUI渲染线程互斥,如果js任务执行时间过长,会导致页面卡顿
GUI渲染	负责渲染浏览器界面,解析html、css,构建dom树和render树、布局、绘制,和js引擎线程互斥,GUI更新会在js引擎空闲时执行
定时器触发	定时器所在线程,setTimeout、setInterval计时完毕后,将回调添加到事件队列,等待js引擎执行
网络线程	在XHR、Fetch等发起请求后新开一个网络线程请求,如果设置了回调函数,在状态变更时,将回调放入事件队列,等待js引擎执行
事件触发	由宿主环境提供,用于控制事件循环,不断地从事件队列里取出任务执行

多线程工作流程

1. 网络线程负责加载网页资源
2. JS引擎解析JS脚本并且执行
3. JS解析引擎空闲时,渲染进程立即工作
4. 用户交互、定时器操作等产生回调函数,放入任务队列中
5. 事件进程进行事件循环,将队列里的任务去除交给JS引擎执行