浏览器渲染过程

我们的浏览器渲染分为以下步骤（包括但不限于）：

1、构建html树（dom）

2、构建css树（cssom）

3、将两棵树合并成一棵树（render tree）

4、Layout布局（文档流、盒模型、计算大小、位置）【主要动html或有关的css】

5、paint绘制（绘制颜色、阴影等）【主要动css】

6、compsite合并根据层叠关系展示画面

每次打开页面，浏览器都会通过渲染引擎执行一系列复杂的操作，包含以上步骤最终实现一个页面。但是我们经常更新样式来达到一些效果，使用js来更新样式，一共分三种渲染方式：

为什么会有三种方式？

根据渲染规则，我们可以发现，假设我把html改变了（位置、盒模型、大小）等有关的css或本身（删除节点），这一过程可能会经过layout布局阶段。

但是如果我们只是改变了background-color，那么就可能不会经过layout，会直接经过paint绘制阶段。

如果我们用了transform，那么既不会经过layout布局阶段，又不会经过paint阶段。会直接到达合成阶段compsite。（虽然有可能改变位置、大小。）

这样做的结果是浏览器整个渲染效率提高了。

有两种方式。

1、使用【谷歌开发者工具-rendering-paint flashing】挨个试

变绿就代表绘制了 paint

案例1：

代码：

.div{
  width:100px;
  height:100px;
  border:1px solid red;
}
.div:hover{
  background-color:red;
}

通过鼠标移动来改变div的background，会发现被鼠标移动到的盒子变绿了，但是其他的没变绿，代表只有这个元素被绘制了。那就代表没经过layout属性。

不信我们再看：

案例2：

我把代码修改为

.div:hover{
  height:110px
}

再来看paint flashing 可以看到全部变绿，说明经历了layout阶段

案例3：

再把代码改成：

.div:hover{
  transform：translateX(20px)；
}

在开始和结束时，会变绿，但是移动过程中不会变绿，说明transform时没有触发layout跟paint阶段。至于为什么开始结束时会变绿，我的理解是可能是抬起或放下时触发了文档流。

2、通过网站知道触发流程（比较权威）