现代浏览器架构

// 待更新...

CPU、GPU

浏览器架构

多进程、多线程...

为什么要多进程

资源隔离、互不影响

输入URL后发生了什么

浏览器进程解析地址、导航线程、网络请求（DNS解析、TLS连接）数据传输、mime嗅探、IPC通知浏览器进程、选取渲染进程准备渲染、渲染进程渲染页面

文档加载完后会通知浏览器进程，tab的加载按钮就停止了；文档卸载时浏览器进程和渲染进程要进行通信确保unload事件

浏览器内核、渲染内核

站点隔离

页面渲染过程

嗅探MIME -> 主线程解析DOM -> 解析JS -> 解析CSS -> Layout Tree(几何形状)/layer -> Paint(绘制顺序) -> 光栅（图块转换为位图） -> 合成(单独的线程、合成帧)、显示(GPU显示)

生成DOM树
生成CSS树
生成布局树
分层
绘制
合成线程分块
光栅化位图
画

渲染优化

尽量使用仅合成动画：

transform
opacity
will-change(最后使用)

参考文献：