渲染流程
- 构建DOM树：html -> DOM 结构
- 样式计算：
- css 文本 -> styleSheets
- 样式表中属性值标准化（exp:2em -> 32px）
- 计算DOM树中每个节点的具体样式：继承、层叠
- 布局阶段：计算DOM树中可见元素的集合位置
-
创建布局树 layoutTree
-
遍历DOM 树中所有可见节点，加到布局树中
-
忽略不可见节点，exp：head，display：none
-
布局计算
- 分层：为特定的节点生成专用的图层，生成对应的图层树 layerTree
- 拥有层叠上下文：position、z-index、filter、opacity
- 需要剪裁clip （内容超出，有滚动条）
- 绘制：绘制顺序+绘制指令=绘制列表
- 分块
- 合成线程会讲图层划分为图块（tile）
- 栅格化：图块->位图（视口附近图块优先生成位图）
- GPU加速生成位图->快速栅格化，保存在GPU内存中
- 合成：发送绘制图块命令DrawQuad，浏览器根据此消息生成页面，显示
