浏览器渲染

浏览器渲染，即浏览器将html,css,js的字节转为渲染元素，展示到页面的过程。

这个过程叫做关键渲染路径。

1. 关键渲染路径

1. 处理HTML构建DOM（文档对象模型)树

2. 处理CSS构建CSSOM（css对象模型）树

3. 将DOM树和CSSOM树合并成一个渲染树

4. 布局，也称为“自动重排”

5. 绘制/栅格化

6. 如果修改了DOM/CSSOM，会导致重新执行，进行重绘或者重排。

2.优化关键渲染路径

上面的5个步骤都需要浏览器完成大量工作，所以消耗时间。

优化就是最大程度的缩短上面5个步骤的执行时间。

优化关键渲染路径，可以大大缩短首页渲染时间，也可以缩短之后页面的刷新时间

3. DOM树构建过程

字节->字符->令牌->节点->DOM

 4. CSSOM树构建过程

构建DOM过程中，遇到<link>标签，外联一个样式文件，预见会使用它来渲染页面。

浏览器立即发出对css文件的请求，返回请求的样式内容，构建CSSOM树。

过程和DOM构建过程一致

 

图中阴影部分的样式，表示继承的父节点的样式。

 

 5. DOM和CSSOM合并成渲染树

渲染树的内容包含DOM中所有可见节点，和每个节点对应的CSSOM的内容。

 

6. 布局 

从渲染树的根结点开始遍历，计算每个节点在视窗中具体位置和大小。

因为某些样式是相对样式。

<div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
</div>
// 第一个div是视窗的50%；
// 第二个div是第一个div的50%；即视窗的25%；

7. 绘制/栅格化

将每个节点转为屏幕上的实际像素。完成绘制。