阅读 328

浏览器组成和多进程架构

我们几乎每天都在使用浏览器,我们在浏览器地址栏中输入网址或者通过链接打开网页后,浏览器就会将目标内容呈现出来。这个过程具体是如何进行的,对于前端开发者来说,了解清楚是很有必要的,因为更细化的了解浏览器的工作原理,能帮助 我们更好地理解那些最佳开发实践的缘由,并在开发中选择更好的实现方案,比如怎么加载JS脚本最好、网页性能如何调优等等。

浏览器结构

先来了解下浏览器的主要结构,参考how browser work,如图所示

从图中可以看出,浏览器的七大组成部件以及组件间的工作关系。

  1. 用户界面
    浏览器中菜单栏、地址栏、向前/回退按钮、书签目录等除了页面显示窗口外的所有地方都属于用户界面。
  2. 浏览器引擎
    浏览器引擎是各个组件之间通信的核心,它在用户界面与渲染引擎间传递指令。为渲染引擎提供接口,将用户界面上的给定的网址、用户浏览器操作(如刷新、向前、退后等)信息提供给为渲染引擎;同时,浏览器引擎 为用户界面提供各种如错误提示、资源下载进度等消息。还有,它可以在客户端本地缓存中读写数据。
  3. 渲染引擎 渲染引擎负责显示请求的内容。例如,如果请求的内容是HTML文件,则它负责解析文件里的html、css等信息,并将网页内容渲染呈现出来。所以渲染引擎的内部包括了Html解析器、css解析器等。
  4. 网络模块
    处理网络请求,比如http请求网页、图片资源等。
  5. JavaScript引擎 网页中经常有JS脚本来动态操作网页,就是靠这个JS引擎来解析执行的。比如Chrome浏览器的V8引擎、Safari浏览器的JavaScriptCore引擎。
  6. 界面后端 前面介绍的用户界面是展示给用户看到的,界面后端是浏览器的图形库,用来绘制基本的浏览器窗口内控件,如输入框、按钮、单选按钮、组合框和窗口等,不同浏览器绘制的视觉效果不太想同,但功能基本都是一样的。
  7. 数据存储 管理用户数据,将与浏览会话相关联的各种数据存储在硬盘上,例如保存书签、cookie、缓存、偏好设置等各种数据,可通过浏览器引擎提供的API进行调用。

这里面最核心的内容是渲染引擎和JS引擎,后面将会详细介绍这两个引擎的相关内容。 这里要了解并不是所有的浏览器的渲染引擎和JS引擎都相同的,这取决于浏览器厂家的技术实现,常见浏览器的渲染引擎和JS引擎如下:

浏览器的多进程架构

首先, 我们知道对于操作系统来讲,浏览器应用程序是一个独立的进程。如果是Mac电脑,打开Chrome浏览器后,在电脑的「活动监视器」中就可以看到Chrome浏览器进程的相关信息。

那浏览器应用内部工作情况又是怎样的呢?其架构是单进程多线程模型,还是多进程多线程模型,还是其他模型架构呢?下面给出答案。 现代的浏览器采用的都是多进程架构,主要包含以下五种进程:

  • 浏览器进程
    浏览器进程是浏览器的主线程,主要负责浏览器的页面管理,如果页面创建、页面关闭、页面前进后退,也负责网络资源下载管理等,该进程对应上述浏览器组成中的浏览器引擎,整个浏览器应用程序只有一个。
  • 渲染进程
    渲染进程是浏览器的内核进程,负责页面渲染、JS脚本的执行,页面事件的处理等,对应的是上述的渲染引擎和JS引擎,在浏览器中,每个Tab窗口页对应一个渲染进程,所以一个浏览器可以包含多个渲染进程。
  • GPU进程
    负责GPU(Graphic Processing Unit,图形处理器)渲染,界面绘制,整个浏览器应用程序只有一个。
  • 插件进程
    浏览器安装的插件(扩展程序),每个插件会创建一个进程,比如掘金插件、印象笔记插件等,所以一个浏览器有可以包含多个插件进程。
  • 网络进程 负责网络请求相关操作,整个浏览器应用程序只有一个。

为了直观的理解这些进程,我们可以打开Chrome 的「任务管理器」查看当前浏览器中运行的所有进程以及每个进程的内存占用空间、进程ID等信息。

如图,浏览器进程主要包括

  • 1个浏览器进程
  • 1个GPU进程
  • 1个网络进程
  • 3个渲染进程(打开了三个标签页,每个标签页对应一个渲染进程)
  • 3个扩展程序进程

浏览器多进程架构主要有如下优势:

  1. 避免单个页面崩了影响整个浏览器
  2. 避免第三方插件崩了影响整个浏览器 这些优势保证了浏览器的稳定性。

浏览器工作大体流程

了解完浏览器的设计架构后,接下来了解下 从输入网址到网页内容展示的整体流程吧。 可以把这个整体流程按照前后顺序分为两大部分:网络资源请求 和 浏览器渲染。

  • 网络资源请求过程是根据URL从服务器上请求对应的资源,包括URL解析、DNS查询、TCP连接、HTTP请求、服务器端响应、断开请求。
  • 浏览器渲染过程是对请求到的资源进行渲染展示,也就是浏览器渲染进程负责的事情,包括构建dom tree、构建cssdom tree,构建rendering tree 、layout、painting。

这两个过程涉及到很多的知识点,后面继续写两篇文章来分别介绍~

参考资料

Inside look at modern web browser

从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理