渲染流水线
-
构建Dom树
-
样式计算
-
布局阶段
-
分层
-
绘制
-
光栅化
-
合成
每个子阶段都有输入的内容，处理过程和输出内容。
构建Dom树
1.为什么要构建Dom树？
浏览器无法直接理解和使用Html，所以需要将html转换为浏览器能够理解的结构dom树。
构建Dom树的输入内容是一个html文件，然后经过html解析器解析，最终输出树状结构的dom.
dom和html几乎一样，dom是保存在内存中的树状结构，可以通过js来查询或修改其内容。
样式计算
目的:计算出dom节点中每个元素的具体样式。
1，把css转化为浏览器能够理解的结构
和html一样，浏览器无法直接理解纯文本的css样式，所以当渲染引擎接收到css文本时，会执行一个转换操作，将css文本转换为浏览器可以理解的结构styleSheets。
2，转换样式表中的属性值，使其标准化
将所有值转换为渲染引擎容易理解的，标准化的计算值，这个过程就是属性值的标准化。
3.计算出dom树中每个节点的具体样式
涉及到css的继承规则和层叠规则
css继承就是每个dom节点都包含着父节点的样式
css层叠是css的一个基本特征，它是一个定义了如何合并来着多个源的属性值算法。它在css处于核心地位，css的全称层叠样式表正是强调了这一点。
样式计算的目的是为了计算出dom节点中每个元素的具体样式，在计算过程中需要遵循css的继承和层叠两个规则。这个阶段最终输出的内容是每个dom节点的样式，并被保存在computedstyle的结构内。
布局阶段
接下来就需要计算出dom树中可见元素的几何位置，我们把这个计算过程叫做布局
1.创建布局树
在显示之前，我们需要额外地创建一棵只包含可见元素布局树。
构建布局树，浏览器大题上需要完成下面这些工作。
遍历dom树中的所有可见节点，并把这些节点加到布局中，而不可见的节点个会被布局树忽略掉，如head标签下面的全部内容。
2.布局计算
现在有一颗完整的布局树，接下来，就要计算布局树节点的坐标位置了。
分层
布局树有了，每个元素的具体位置信息都计算出来了，在绘制页面之前还要做一件事
为了方便页面实现一些复杂效果，3d变换，页面活动，z-index做z轴排序，为了更加方便的实现这些效果，渲染引擎需要为特定节点生成专用的图层，并生成一颗对应的图层树。
通常情况下，并不是布局树的每个节点都包含一个图层，如果一个节点没有对应的层，那么这个节点就从属于父节点的图层。
问题，需要满足什么条件，渲染引擎才会为特定节点创建新的层？
1.拥有层叠上下文属性的元素会被提升为单独的一层
2.需要剪裁的地方也会被创建为图层。
3.图层绘制
^渲染引擎实现图层的绘制步骤
会把一个图层的绘制拆分成很多小的绘制指令，然后把这些指令按照顺序组成一个待绘制列表。
栅格化操作
绘制操作是由渲染引擎中的合成线程来完成。合成线程会将图层划分为图块。
合成线程会按照视口附近的图块来优先生成位图，实际生成位图的操作是由格栅化来执行的。所谓格栅化，是指将图块转换为位图，通常，格栅化过程都会使用Gpu来加速生成，使用gpu生成位图的过程叫做快速格栅化，生成的位图被保存在gpu内存中。
合成和显示
一旦所有图块都被光栅化，合成线程就会生成一个绘制图块的指令，然后将该指令提交给浏览器进程，浏览器进程里面有一个组件，用来接收合成线程发过来的命令，然后根据命令，将其页面内容绘制到内存中，最后再将内存显示在屏幕上。
标签：布局,浏览器,dom,流程,渲染,图层,节点,css 来源： https://www.cnblogs.com/kelanmonkperson/p/15558188.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。