渲染主线程
1.HTML解析
- html （parse）====> DOM树,CSSOM树
- 将html解析为DOM对象与CSS对象，为后续流程做准备，为JS操作dom和样式提供操作空间
HTML解析过程中遇到css代码
--- 为提高效率，浏览器会启动一个预解析器率先下载和解析css
HTML解析遇到 JS
渲染主线程遇到JS时会暂停一切行为，等待下载执行完成之后才能继续预解析线程
*因为js代码的执行可能会修改DOM树*
2. 样式计算
css的计算过程
CSS属性值的计算过程
- 层叠
- 继承
视觉格式化模型
- 盒模型
- 包含块
- BFC
计算后的样式
// computed Style ==> 最终样式 cssom树
/*
p {
color: red; ====> color: rgb(250,0,0)
font-size: 2rem; ===> font-size: 32px
}
*/
将相对值全部转换为绝对值
3.布局
DOM树与Layout树并不一定时一一对应的
例如：伪元素存在与layout树而不存在于dom树， display： none（所有没有几何信息的元素）存在于dom树而不存在于layout树
内容必须在行盒中
行盒与块盒不能乡邻
4.分层
主线程中进行，分层元素单独处理
与堆叠上下文有关的属性会影响分层：（z-index,opcity，transform等）
will-change: transform; // 触发浏览器分层
5.绘制
为每层生成绘制指令集，描述绘制内容
其他线程
6.分块Tiling
分块会将每一层分为多个小的区域
7.光栅化
将每个块变成位图 浏览器优先处理靠近视口得块
合成线程会将块信息交给GPU进程，GPU进程会开启多个线程来完成光栅化，得到一块一块得位图
8.画
合成线程计算出每个位图再屏幕上得位置，交给GPU进行最终呈现
渲染主线程与合成线程存在于沙盒，不能直接与硬件交互
合成线程 ===> GPU进程 ===> 硬件显示
