标签：DOM HTML 文档 图层 绘制 节点 CSS 页面
HTML->页面
先上图
提示：这里可以添加本文要记录的大概内容：
提示：以下是本篇文章正文内容，下面案例可供参考
一、HTML解析器将HTML转成DOM树
可以看到输入是HTML文档，输出是DOM树，DOM树包含节点和内容，以及各个节点之间的关系是树的关系。
我们可以结合网页分析一下：
在开发者工具打开console,输入document,可以看到document包含的内容，这就是一个完整的DOM树结构，并且我们可以对个DOM树进行查询和操作，比如改变DOM节点。
如我们执行：document.getElementsByTagName("p")[0].innerText = "black"页面效果将变成：
二、CSS解析器将CSS转换成styleSheets
我们写的CSS浏览器并不能理解，所有需要将CSS转换成浏览器可以理解的结构：
那CSS来源有哪些呢，我们知道，我们平时写作
计算每个节点的样式 Render Tree
使用CSS的继承性和层叠规则，DOM元素中的每个节点的样式将会被计算出来，可以通过控制台 style computed 查看每个节点对应的完整的样式
有了样式之后，我们还需要知道每个节点的位置，大小，下面是另一个阶段：
布局
这个阶段主要是计算出DOM树中可视节点的几何大小以及空间位置，为后面的绘制提供基础。
创建布局树
首先也会用一个树结构来存储布局信息，成为布局树
可以看出，对于head,link,display等不会展示在页面中的节点并不会包含在内，只会包含与页面展示依赖的节点。
布局计算
接下来就是进行布局计算，主要根据样式计算出节点在页面中的坐标系，大小等。
我们知道了元素的位置是不是就可以之间绘制了呢，不是的，因为存在复杂的布局，还需要将其进行分层处理，将复杂的页面分成不同的图层，再对每个图层进行绘制再合成。
分层
接下来就是分层啦，哪些情况会导致分层呢？我们可以在控制台 layer 中查看当前页面有哪些层，
下面就揭晓导致分层的因素，用一张图来表示吧
从图中可以看出，明确定位属性的元素、定义透明属性的元素、使用CSS滤镜的元素等，z-index 指明都拥有层叠上下文属性。
还有，需要剪裁的地方也会形成图层，
出现这种裁剪情况的时候，渲染引擎会为文字部分单独创建一个层，如果出现滚动条，滚动条也会被提升为单独的层。你可以参考下图
图层准备好了，接下来就是图层绘制啦
图层绘制
渲染引擎会会把一个图层的绘制拆分成很多小的绘制指令，然后再把这些指令按照顺序组成一个待绘制列表，如下图所示
你也可以打开“开发者工具”的“Layers”标签，选择“document”层，来实际体验下绘制列表，如下图所示：
栅格化
我们知道，一个图层可能很大，超出了我们的可视区域内，那这些区域是不是得全部绘制出来呢，答案是否定的，为了减小开销，合成线程会将图层划分为图块（tile），这些图块的大小通常是256x256或者512x512，如下图所示：
然后合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由栅格化来执行的。所谓栅格化，是指将图块转换为位图。而图块是栅格化执行的最小单位。
合成和显示
一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的命令——“DrawQuad”，然后将该命令提交给浏览器进程。
浏览器进程里面有一个叫viz的组件，用来接收合成线程发过来的DrawQuad命令，然后根据DrawQuad命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上。
到这里，经过这一系列的阶段，编写好的HTML、CSS、JavaScript等文件，经过浏览器就会显示出漂亮的页面了。
总结
好了，我们现在已经分析完了整个渲染流程，从HTML到DOM、样式计算、布局、图层、绘制、光栅化、合成和显示。下面我用一张图来总结下这整个渲染流程：
结合上图，一个完整的渲染流程大致可总结为如下
- 渲染进程将HTML内容转换为能够读懂的DOM树结构。
- 渲染引擎将CSS样式表转化为浏览器可以理解的styleSheets，计算出DOM节点的样式。
- 创建布局树，并计算元素的布局信息。
- 对布局树进行分层，并生成分层树。
- 为每个图层生成绘制列表，并将其提交到合成线程。
- 合成线程将图层分成图块，并在光栅化线程池中将图块转换成位图。
- 合成线程发送绘制图块命令DrawQuad给浏览器进程。
- 浏览器进程根据DrawQuad消息生成页面，并显示到显示器上
后续再增加可以提升浏览器性能的因素啦。
标签：DOM,HTML,文档,图层,绘制,节点,CSS,页面 来源： https://blog.csdn.net/qq_40409143/article/details/123592568
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。