一直都知道一次渲染与多次渲染必是一次更优 优在哪里呢？
浏览器加载css的步骤：
通常在文档初次加载时，
浏览器引擎构建DOM树，
根据DOM元素的几何属性构建一棵渲染树。
渲染树的每个节点都有大小和边距等属性，类似于盒子模型（由于隐藏元素不需要显示，渲染树中并不包含DOM树中隐藏的元素）。
当渲染树构建完成后，浏览器就可以将元素放置到正确的位置了，再根据渲染树节点的样式属性绘制出页面。
由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成。
但table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中节点的属性，
通常要花3倍于同等元素的时间。
重排必引起重绘
重绘不一定重排
<style>
#foo {
height: 100px;
width: 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;
width: 100px;
background: red;
transition: transform 1s linear;
}
#foo:hover {
transform: scale(2);
}
</style>
<body>
<div id="foo"></div>
</body>| 主线程 | 排版线程 | 速度 |
|---|---|---|
| 元素布局 | 慢 | |
| 将元素绘制成位图 | 载入到 GPU显存中 | 慢 |
| 开始CSSTransition | 绘制 | |
| 通知 | 倍数++ | |
| ... | ... | ... |
原文：https://www.cnblogs.com/moneyss/p/12060528.html