以 chrome 为例，分析浏览器工作原理
chrome 是多进程架构。
一、4个进程
1、浏览器进程
2、渲染进程
3、插件进程
4、GPU 进程
进程间通过 IPC 通信。
二、主要工作都是由 浏览器进程 + 渲染进程 完成
两个进程都包含多个线程。
1、浏览器进程（3个线程）
（1）UI 线程
（2）network 线程
（3）storage 线程
2、渲染进程
（1）一个主线程
（2）多个工作线程
（3）一个合成线程
（4）多个光栅化线程
三、页面渲染过程（渲染进程负责）
1、【前言】浏览器进程的 network 线程，访问浏览器指定的 url，得到 content-type 为 html 的 response，就把这个 response 数据，交给渲染进程。
2、【开始渲染-DOM】渲染进程拿到 html 数据流（是字节流，Bytes），交给主线程去解析。
Bytes
=> Characters（即我们所编写的字符代码，根据html文件的字符编码转换生成）形如： <、h、t、m、l、>
=> Tokens（解析器解析文本中的标签等内容，将文本字符解析为有意义的标记） 形如： <html>、</html>
=> Node（节点：具有特定属性的不同对象） 形如：{nodeType: 9, nodeName: '#text', ...}
=> DOM（链接各个 Node 节点，形成父子关系树）
3、【CSSOM】解析 DOM 过程中，遇到 link、style 标签，渲染进程会告诉浏览器进程，发送请求（network线程去发送），请求文件。文件请求回来，会立刻进行解析，构建 CSSOM，过程和 DOM 相似，从 Bytes => CSSOM。DOM 和 CSSOM 渲染，相互不阻塞。
遇到 script 标签，则暂停 DOM 解析，立即下载并执行 script，js 下载完毕、并且执行完毕后，DOM 才继续解析。
如果 script 标签设置了 async，则 DOM 继续解析，同时，立即并行下载并执行 js。
如果 script 标签设置了 defer，则 DOM 继续解析，同时，立即下载 js，但延迟执行。DOM 完全解析和显示后，再执行 js。
（**待确定**：所以，主线程解析 DOM，CSSOM 的生成是某个工作线程来完成的吗？并行的话，肯定不能都由主线程自己做。具体 DOM 和 CSSOM 的解析是如何并行的，待确定。）
4、【render tree】DOM、CSSOM 全部构建完毕后，主线程根据 CSSOM 计算出每个 DOM 节点的样式，生成 render tree。渲染进程解析 render tree，生成绘画记录，记录每一个元素的位置、样式、绑定事件等信息。
5、【layer tree】根据 render tree 的节点样式，把以下这几类元素，分别划分到单独的层（layer）
（1）有明确的 css 定位属性（relative、absolute 或 transform）
（2）是透明的（transparent）
（3）有 css overflow、css alpha 遮罩（alpha mash）或者 css reflection
（4）有 css 滤镜（filter）
（5）3D 环境（translateZ、rotateY、rotateX）或 canvas 元素
（6）其他元素
6、【光栅化】文档结构、元素的样式、元素的几何关系、绘画顺序，这些信息我们都有了，这个时候如果要绘制一个页面，我们需要做的是把这些信息转化为显示器中的像素，这个转化的过程，叫做 光栅化。
layer tree 的每一层，分别进行光栅化。
这里，合成线程上场。
合成线程切分每一个layer，变成一个一个小图块。然后把这些小图块，分别发送给一系列的光栅化线程，进行光栅化。
光栅化线程，会将每个图块的光栅结果，缓存在 GPU 进程的内存中。
每一层，使用一块缓存区（多缓存）。
每个图块，光栅化后，都会生成一个叫做 绘图四边形 的信息记录。
绘图四边形：包含图块在内存的位置，以及图层合成之后图块在页面的位置，之类的信息。
7、【合成】处于视口中的页面的栅格化图块，就会被合成线程合成，形成一个合成帧（也就是当前这一时刻的页面快照）。
8、【页面操作】
如滚动操作：
【概念】非快速滚动区域：合成器线程会标记页面中绑定有事件处理器的区域为非快速滚动区域。
（1）快速滚动区域：合成线程直接将滚动后、新视口内的光栅化图块，进行合成。
（2）非快速滚动区域：合成线程将事件信息发送给主线程，等待主线程进行事件处理后，再合成当前新视口内的光栅化图块。
手动指定操作区域，为快速滚动区域：
document.body.addEventListener('touchstart', event => {
if(event.target === area) {
event.preventDefault()
}
}, {passive:true});
这样，合成器线程就会跳过主线程的事件处理，直接合成新的帧。
#详情参考：浏览器渲染
