前言
本文为笔者在初学Web时的学习记录，如有错误请大家指出。
正文
浏览器架构
- 单进程架构：所有模块都运行在同一个进程里。
特点：扩展性低，安全性低，稳定性低，流畅度较卡顿。内存占用较小，节约系统资源。
- 多进程架构：主进程、网络进程、渲染进程、GPU进程、插件进程。
特点：扩展性中，安全性高，稳定性高，流畅度较流畅。内存占用较高。
- 面向服务架构：将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务。
特点：扩展性高，安全性高，稳定性高，流畅度较流畅。内存占用较高。
Chrome运行原理
浏览器主进程：输入处理->开始导航->读取响应->寻找渲染进程
输入处理
用户Url框输入内容后，UI线程会判断输入：
- 如果是URL，直接请求站点资源
- 如果是query，将输入发送给搜索引擎
开始导航
当用户按下回车后，UI线程通知网络线程发起一个网络请求，来获取站点内容。在请求过程中，tab是处于loading状态的。
读取响应
网络线程接收到HTTP响应后，先检查响应头的媒体类型（MIME Type）：
- 如果响应主体是一个HTML文件，浏览器将内容交给渲染进程处理。
- 如果拿到的是其他类型文件，比如Zip、exe等，此时运用下载逻辑进行处理，交给下载管理器处理。
寻找渲染进程
- 网络线程做完所有检查后，会告知主进程数据已准备完毕，主进程确认后为这个站点寻找一个渲染进程。
- 主进程通过IPC消息告知渲染进程去处理本次导航。
- 渲染进程开始接收数据并告知主进程自己已开始处理，导航结束，进入文档加载阶段。
渲染进程
资源加载->构建渲染树->页面布局->页面绘制
资源加载
加载HTML文档。除此之外，还需要加载子资源，比如一些图片，CSS样式文件以及JavaScript脚本。
构建渲染树
构建DOM树，将HTML文本转化成浏览器能够理解的结构。构建CSSOM树，浏览器同样不认识，将CSS代码转化为可理解的CSSOM树。而渲染树就是DOM树和CSSOM树的结合。
页面布局
根据渲染树计算每个节点的位置和大小； 在浏览器页面区域绘制元素边框； 遍历渲染树，将元素以盒模型的形式写入文档流。
页面绘制
构建图层：为特定的节点生成专用图层
绘制图层：一个图层分成很多绘制指令，然后将这些指令按顺序组成一个绘制列表，交给合成线程
合成线程接收指令生成图块
栅格线程将图块进行栅格化
展示在屏幕上
