浏览器架构
# 1.概述
# 1.1 CPU，GPU，操作系统，应用程序
四者关系如下：
CPU，GPU ⇒ 操作系统 ⇒ 应用程序
GPU即Graphics Processing Unit，图像处理器
CPU、GPU 都属于计算机硬件提供汇编语言API供操作系统调度，操作系统又提供高级语言API供应用程序操作
# 1.2 应用程序里的进程、线程
应用程序(program)由多个进程(process)构成，进程是CPU资源分配的最小单位；单个进程又由多个线程(thread)构成，线程是CPU调度的最小单位
如下图所示：
线程共享 CPU 分配给进程的资源内存空间，可以彼此通信，而同个程序里的进程之间内存地址是相互隔离的，需要通过IPC（Inter Process Communication）进行通信(例如浏览器主进程需要通过RendererHost接口向渲染进程传输数据)
进程间彼此相互隔离，工作独立，一个进程 GG 了也不会影响其他进程
# 1.3 浏览器架构
浏览器按多个进程分成多个模块，各个模块相互独立，且有着单一职责，又相互联系，浏览器各个模块如下：
浏览器模块(Browser): 负责整个浏览器内行为协调，调用各个模块
渲染模块(Renderer): 负责渲染网页
GPU模块: 负责绘制页面
网络模块(Network): 负责网络请求
存储模块(Storage): 负责本地存储
用户界面模块(UI): 负责浏览器提供给用户的界面模块
设备模块(Device): 负责与各种本地设备交互
在 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 类型数据，然后由浏览器进程通过RendererHost接口将数据传输给渲染进程作处理
补充：
1.为提高效率，UI 线程在通知网络线程发送请求的同时也会实例化一个渲染进程等着
2.若content-type为zip或者其他类型文件，会将数据交由下载管理器进程处理
# 2.3 渲染进程
渲染进程在接收到html数据后，就会解析 html 文件，开始渲染页面（具体渲染过程这里不展开），在完成渲染后，通过IPC告知浏览器进程里的ui线程停止 tab 栏的 loading 动画
流程图如下:
# 参考
1.现代浏览器内部机制 Part 1 | 多进程架构 (opens new window)
