从 浏览器绘制流程 看重排重绘

浏览器的绘制流程：

HTML + CSS
   ↓
DOM + CSSOM
   ↓
Render Tree（渲染树）
   ↓
Layout（布局/重排）
   ↓
Paint（绘制/重绘）
   ↓
Rasterization（光栅化）
   ↓
Compositing（GPU 合成）

我们可以结合该流程来看下面的优化：

1. 最基础的，减少影响其他元素
   如果我们直接修改一个在 flow 中的元素的尺寸，会导致其自身、兄弟元素、甚至父级都发生重排，以及重排后的一系列工作（重绘、光栅化、合成），性能消耗巨大。

   如果我们修改的是一个 position: absolute 的元素的尺寸，就只会导致其自身重排，影响就小一些了。

2. 减少重排
   相比较 left, translateX 变化时，元素的几何盒不变，不会触发重排，而仅仅是重绘。

   如果给元素加上 will-change，更是连重绘都不需要，元素会绘制在一个独立的层上，仅仅只需要在合成的时候对贴图进行变化就行了。所以我们常说动画中 translateX 比 left 性能好。

   这里顺便贴一下 MDN 里说的，“有一些特定的属性和元素可以实例化一个层，包括 video 和 canvas，任何 CSS 属性为 opacity 、3D transform、will-change 的元素，还有一些其他元素。”

顺便建议一下，我们的图片最好指定尺寸。不指定的话，图片加载完成后，就会导致其后的内容的“跳动”，极其影响体验。

以上内容是对MDN: 浏览器的工作原理的粗糙理解和部分总结，建议去看原文。MDN 的文章基本都很值得看。