1.浏览器架构

1.概述

1.1 CPU，GPU，操作系统，应用程序

---

四者关系如下：

CPU，GPU ⇒ 操作系统 ⇒ 应用程序
1

GPU即Graphics Processing Unit，图像处理器
CPU、GPU 都属于计算机硬件提供汇编语言API供操作系统调度，操作系统又提供高级语言API供应用程序操作

1.2 应用程序里的进程、线程

---

应用程序(program)由多个进程(process)构成，单个进程又由多个线程(thread)构成，如下图所示：

同个进程里的线程共享内存空间，可以彼此通信，而同个程序里的进程内存地址相互隔离，需要通过IPC（Inter Process Communication）进行通信
进程间彼此相互隔离，工作是独立的，一个进程GG了也不会影响其他进程

1.3 浏览器架构

---

浏览器按多个进程分成多个模块，各个模块相互独立，且有着单一职责，又相互联系，浏览器各个模块如下：

浏览器模块(Browser): 负责整个浏览器内行为协调，调用各个模块
网络模块(Network): 负责网络请求 
存储模块(Storage): 负责本地存储
用户界面模块(UI): 负责浏览器提供给用户的界面模块
GPU模块: 负责绘图
渲染模块(Renderer): 负责渲染网页
设备模块(Device): 负责与各种本地设备交互
1
2
3
4
5
6
7

在Chrome浏览器里点击左上角的三个点按钮⇒ 更多工具⇒ 任务管理器，可以看到浏览器里运行的各个进程

补充：
1.每一个页面会在这个渲染进程中运行，js是其中的一个单线程
2.Chrome在web是多进程，在移动设备由于资源有限故采用单进程

1.4 站点隔离

---

站点隔离是将不同站点各自运行在独立的进程里，不许通信，实现沙盒隔离，从而阻碍了iframe绕过同源策略进行安全攻击的可能，因为同个进程站点之间可以进行数据通信

2.导航功能

在开始介绍浏览器的导航功能之前，先抛出一个经典问题：从输入一个url到显示一个页面，浏览器背后发生了些什么？
这个问题的背后其实涉及到了浏览器的很多个进程之间的通信，下面来逐个过一过这些模块

2.1 UI线程

---

ui线程是浏览器进程中的一个线程，负责浏览器UI展示和用户交互。用户在导航搜索栏输入时，会通过ui线程解析校验输入的url，在用户敲击回车后，ui线程控制网页tab栏开启loading动画，通知网络进程发送请求

2.2 网络线程

---

网络线程在拿到url后就会启动服务，DNS寻址后通过一系列网络协议与服务器建立安全链接，在收到响应后，检查请求头header里的content-type字段发现是html类型数据，然后由浏览器进程通过IPC该数据交由渲染进程作处理
补充：
1.为提高效率，UI线程在通知网络线程发送请求的同时也会实例化一个渲染进程等着
2.若content-type为zip或者其他类型文件，会将数据交由下载管理器进程处理

2.3 渲染进程

---

渲染进程在接收到html数据后，就会解析html文件，开始渲染页面（具体渲染过程这里不展开），在完成渲染后，通过IPC告知浏览器进程里的ui线程停止tab栏的loading动画

流程图如下

参考一：现代浏览器内部机制 Part 1 | 多进程架构
参考二：精读《深入了解现代浏览器一》