重排与重绘

一直都知道一次渲染与多次渲染必是一次更优优在哪里呢？

浏览器加载css的步骤：

通常在文档初次加载时，

浏览器引擎构建DOM树，

根据DOM元素的几何属性构建一棵渲染树。

渲染树的每个节点都有大小和边距等属性，类似于盒子模型（由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素）。

当渲染树构建完成后，浏览器就可以将元素放置到正确的位置了，再根据渲染树节点的样式属性绘制出页面。

由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。

但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，

通常要花3倍于同等元素的时间。

重排必引起重绘

重绘不一定重排

在现代浏览器中，渲染页面所要负责的线程主要有两个：主线程和排版线程。

运行js
计算元素css的样式
布局页面
把元素绘制成一个或多个位图
交给排版线程
- 通过GPU渲染位图显示在屏幕上
- 向主线程请求更新位图的可见部分或即将可见的部分
- 判断当前页面处于可见部分
- 判断出即将通过页面滚动而可见的部分
- 随着用户滚动页面来移动这些部分

排版线程对于用户的操作保持快速的响应，普遍的效率时每秒 60 帧的速度去刷新显示。

实例1：

<style>
#foo {
  height: 100px;
   100px;
  background: red;
  transition: height 1s linear;
}
#foo:hover {
  height: 200px;
}
</style>
<body>
  <div id="foo"></div>
</body>

主线程	排版线程	速度
元素布局		慢
将元素绘制成位图	载入到 GPU显存中	慢
开始CSSTransition	绘制
高度++
重新布局		慢
将元素绘制成位图	载入到 GPU显存中	慢
...	...	...

频繁重载重绘

<style>
#foo {
  height: 100px;
   100px;
  background: red;
  transition: transform 1s linear;
}
#foo:hover {
  transform: scale(2);
}
</style>
<body>
  <div id="foo"></div>
</body>

主线程	排版线程	速度
元素布局		慢
将元素绘制成位图	载入到 GPU显存中	慢
开始CSSTransition	绘制
通知	倍数++
...	...	...