浏览器渲染

浏览器渲染，即浏览器将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构建过程一致

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

 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. 绘制/栅格化

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

浏览器渲染

原文：https://www.cnblogs.com/lyraLee/p/11872523.html