五、HTML、CSS和JavaScript，是如何变成页面的？

完整的渲染流水线示意图

结合上图，一个完整的渲染流程大致可总结为如下：

1. 渲染进程将 HTML 内容转换为能够读懂的 DOM 树结构。
2. 渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。
3. 创建布局树，并计算元素的布局信息。
4. 对布局树进行分层，并生成分层树。
5. 为每个图层生成绘制列表，并将其提交到合成线程。
6. 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
7. 合成线程发送绘制图块命令 DrawQuad 给浏览器进程。
8. 浏览器进程根据 DrawQuad 消息生成页面，并显示到显示器上。

此学习记录来自于极客时间专栏浏览器工作原理与实践，由于个人对这块内容比较感兴趣，所以花钱买了专栏，但看完总觉得什么都没记住，所以将一些重要内容记录下来。文中有老师课程中的原文和配图，已在课程留言区告知老师，如侵删。
如果对这块内容感兴趣，强烈建议去读一遍老师的课程，很有收获。