德州网站建设教程,抚顺市网站建设,网站企业网站建设需求文档,嘉兴注册公司渲染
渲染流水线
构建 DOM 树
输入#xff1a;HTML 文档#xff1b;处理#xff1a;HTML 解析器解析#xff1b;输出#xff1a;DOM 数据解构。
样式计算
输入#xff1a;CSS 文本#xff1b;处理#xff1a;属性值标准化#xff0c;每个节点具体样式#xff08…渲染
渲染流水线
构建 DOM 树
输入HTML 文档处理HTML 解析器解析输出DOM 数据解构。
样式计算
输入CSS 文本处理属性值标准化每个节点具体样式继承、层叠输出styleSheets(CSSOM)。
布局(DOM 树中元素的计划位置)
DOM CSSOM 合并成渲染树布局树DOM 树中的可见元素布局计算。
分层
特定节点生成专用图层生成一棵图层树层叠上下文、Clip类似 PhotoShop 里的图层拥有层叠上下文属性明确定位属性、透明属性、CSS 滤镜、z-index 等的元素会创建单独图层没有图层的 DOM 节点属于父节点图层需要剪裁的地方也会创建图层。
绘制指令
输入图层树渲染引擎对图层树中每个图层进行绘制拆分成绘制指令生成绘制列表提交到合成线程输出绘制列表。
分块
合成线程会将较大、较长的图层一屏显示不完大部分不在视口内划分为图块tile, 256256, 512512。
光栅化栅格化
在光栅化线程池中将视口附近的图块优先生成位图栅格化执行该操作快速栅格化GPU 加速生成位图GPU 进程。
合成绘制
绘制图块命令——DrawQuad提交给浏览器进程浏览器进程的 viz 组件根据DrawQuad命令绘制在屏幕上。
相关概念
重排
更新了元素的几何属性如宽、高、边距触发重新布局解析之后的一系列子阶段更新完成的渲染流水线开销最大。
重绘
更新元素的绘制属性元素的颜色、背景色、边框等布局阶段不会执行无几何位置变换直接进入绘制阶段。
合成
直接进入合成阶段例如CSS 的 transform 动画直接执行合成阶段开销最小。
此文章为2月Day9学习笔记内容来源于极客时间《Vim 实用技巧必知必会》推荐该课程。
