浏览器渲染流程

HTML/CSS/JS

浏览器接收这三种文件,渲染出页面

HTML:HyperText Marked Language, 超文本标记语言, 标记和文本组成
CSS: Cascading Style Sheets, 层叠样式表, 选择器和属性组成
JS: Javascript, 解释型编程语言, 能让页面'动'起来

渲染流水线分为以下8个子阶段:
构建DOM树样式计算布局阶段分层绘制分块光栅化合成

构建DOM树

创建出节点

1.HTML被转换为浏览器能理解的结构,DOM树

根据HTML中的层次结构,将HTML解析为具有父子节点关系的DOM树
浏览器输入document可以看到DOM树结构

样式计算

计算出每个节点的样式

2.将CSS转换为浏览器能理解的结构,styleSheets

CSS三个来源link外部CSS文件,style标签内的CSS,元素style属性内的CSS
该结构具备查询和修改功能
浏览器输入document.styleSheets查看

3.转换样式表中的属性值,使其标准化

如:2em,blue,bold等属性值

4.计算出DOM树中每个节点的具体样式(继承和层叠)

继承:子节点继承父节点样式,层叠:一个DOM节点合并多个来源属性值的优先级

布局阶段

计算出DOM树中可见元素的几何位置

5.创建布局树

构建只含可见元素的布局树,如 head标签下的全部内容全不可见

6.布局计算

进行布局操作的时候,会把布局运算的结构又写回布局树
所以布局树既是输入又是输出,这是布局阶段一个不合理的地方
Chrome团队正在重构代码,下一代布局系统叫LayoutNG,试图清晰分离输入输出,布局算法更加简单

分层

渲染引擎为特定节点生成专用图层，并生成图层树(layerTree)

一个图层可包含多个节点,满足以下情况之一会生成图层
拥有层叠上下文属性的元素会单独一层(position:fixed,z-index,opacity:0.5)
被裁剪过的元素,如 div盒子长宽小于内容长宽

绘制列表为每个图层生成绘制列表,交给合成线程

渲染引擎将一个图层的绘制分成多个绘制指令,组成待绘制列表
绘制列表只是用来记录绘制顺序和绘制指令的列表,

光栅化

主线程将绘制列表提交给合成线程,实际绘制由渲染引擎中的合成线程来完成
视口(viewport):用户能看见的页面部分,
图块(tile):栅格化的最小单位,256X256或512X512,合成线程将图层分化而来
栅格化/光栅化: 将图块转化为位图
快速栅格化/GPU栅格化: 栅格化在专门的栅格化线程池中执行, 通常使用GPU生成位图,
结果的位图数据在GPU内存中,这就涉及了跨进程操作,渲染进程与 GPU进程

合成线程将图层分为图块
图块在栅格化线程池中被栅格化为位图

合成

合成线程在所有图块被光栅化后, 生成绘制图块命令DrawQuad,提交浏览器线程
浏览器线程, viz组件接收 DrawQuad命令, 将页面内容绘制在内存中,最后将内存显示在屏幕上

总结

渲染进程将HTML转换为 DOM树
渲染引擎将CSS转换为 styleSheets,计算出 DOM节点的样式
布局树被创建,并计算布局信息
图层树被创建,由布局树分层而来
绘制列表被根据每个图层生成, 并提交给合成线程
合成线程将图层分为图块,并在光栅化线程池中将图块转换为位图
合成线程发送绘制图块命令DrawQuad 给浏览器进程
浏览器进程根据 DrawQuad 生成页面,并显示在显示器上

重排重绘合成

CSS文件的下载阻塞DOM树的合成

浏览器接收到HTML页面第一批数据的时候,DOM解析器开始工作

JS脚本会阻塞DOM渲染
JS外部脚本也会阻塞DOM渲染
JS脚本访问了元素样式,则会等待样式文件下载,从而阻塞DOM渲染
如果,解析过程遇到内部JS脚本非文件,会暂停解析,执行JS脚本,再继续解析;
如果,解析过程遇到外部JS脚本文件,会暂停解析,下载并执行JS脚本,再继续解析;
如果,解析过程遇到JS脚本,会暂停解析,执行JS脚本,
如果,此JS脚本访问了某元素样式,会暂停JS执行,等待样式下载,才继续执行JS.

浏览器渲染流程#

HTML/CSS/JS#

构建DOM树#

样式计算#

布局阶段#

分层#

光栅化#

合成#

总结#

重排 重绘 合成#

CSS文件的下载阻塞DOM树的合成#