首先 HTML 和 CSS 先转换数据结构，我们写的文件，浏览器是不能直接识别的，必须要转换成「渲染进程」可以识别的 DOM树 和 styleSheets，再合成可见的 DOM 树和样式表对应结构。
渲染过程中根据 z-index 或者 fixed 属性来分成不同的图层，把图层绘制成图块，GPU 根据图块生成位图，当所有位图都生成完后，会提交一个绘制命令给主进程，主进程负责显示到用户屏幕上。
DOM 树结构
浏览器拿到 HTML 文件，需要先转成可以识别的数据结构。先会把文件变成字符流。在字符流的基础上通过「状态机」来分析里面的词 html、div、p 等，根据词来构造成一套可识别的 DOM 树。
CSS 样式表
CSS 样式也是同理，外链样式、嵌入样式、行内样式，先转成自己可以识别的数据，最终会生成一套「样式表 styleSheets」，页面中 DOM 结构和 CSS 结构都是相对应的，以此来显示 DOM 的样式，如果没有当前的样式，会去查找上一层级的样式，最顶端是 Html 。
布局信息
DOM树和 CSS样式表生成好后，会合并成「布局信息」，就是 div、p、span 宽、高、间距、行距等信息。当然要把 display:none 的隐藏标签去掉，不会在「布局信息」里生成。
分层
我们看到的 HTML 是个平面，但渲染的时候是分成多个图层的，图层和 PhotoShop 的图层是一样的道理，一层层叠加、覆盖。如果 DOM 有 z-index 、opacity、fixed 等这些属性的，会生成不同的图层。
绘制列表
再然后要生成绘制列表了，来记录绘制的顺序和指令，绘制矩形 100*100 ，位置在左上角，绘制矩形 200*200 ，位置在 100,100 。就样细小的绘制指令，融合成一个大的绘制列表。
分块
根据绘制列表提供的信息，在渲染的时候会渲染离 viewport 最近的几个图块，图块大小通常是 256×256 或者 512×512 。为了配合窗口视图「viewport」的展示。GPU 会做一个操作就是把图块生成位图。屏幕高 800，整个页面生成的位图为 3000 高度，根据位图的位置来计算和判断显示哪些位图。
合成和显示
当图块都被生成位图后，就把位图扔给内存，由内存显示到用户屏幕上。
大概理了一下关于渲染流程的步骤，发现里面细节还是很多的。文中如果有理解不对的地方，大家可以去订阅 极客时间《浏览器工作原理与实践》订正，非常好的课程。
题图授权基于 www.pixabay.com 相关协议
原创文章，作者：小道研究，如若转载，请注明出处：https://www.sudun.com/ask/34532.html
