大概流程
- 根据HTML构建HTML树 (DOM)
- 根据CSS构建 CSS树 (CSSOM)
- 将两棵树合并成一颗渲染树 (render tree)
- Layout布局(文档流、盒模型、计算大小和位置)
- Paint绘制(把边框颜色、文字颜色、阴影等画出来)
- Compose 合成 （根据层叠关系展示画面）
浏览器进程
-
浏览器主进程，提供界面交互，管理子进程，文件存储等功能。
-
网络进程，提供下载网络资源的能力
-
插件进程，运行插件的进程
-
GPU进程，原是用来渲染CSS 3D的，后用来渲染UI界面
-
渲染进程，把HTML,CSS,JavaScript转为用户可与之交互的页面，JavaScript引擎便运行在渲染进程内。
| 进程 | 功能 |
|---|---|
| 浏览器主进程 | 主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。 |
| 渲染进程 | 核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中。默认情况下，Chrome 浏览器会为每个tab标签创建一个渲染进程，但如果从一个页面打开了另一个新页面，而新页面和当前页面属于同一站点的话，那么新页面会复用父页面的渲染进程。 |
| GPU进程 | GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。 |
| 插件进程 | 主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。 |
| 网络进程 | 主要负责页面的网络资源加载。 |
详细流程
构建dom树
计算样式
布局
分层
图层绘制
栅格化(光栅化)
合成和显示
总结
1、渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。
2、渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。
3、创建布局树，并计算元素的布局信息。
4、对布局树进行分层，并生成分层树。
5、为每个图层生成绘制列表，并将其提交到合成线程。
6、合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
7、合成线程发送绘制图块命令 DrawQuad 给浏览器进程。
8、浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。