重绘和重排，原来那么简单

前言

大家好，我是辉夜真是太可爱啦 。

在阅读本文之前，最好先对 浏览器的渲染过程 有所理解，这也是作为阅读本文之前的铺垫知识。

先放上我们的渲染过程图：

重排

重排，也叫做回流，对于重排，可以将它理解为 重新排版。

简而言之，让浏览器需要重新计算布局信息，需要重新布局并且绘制，就是重排 。

造成页面重排的原因也有很多，大致可以分为以下几种：

• 改变元素几何属性或布局

  改变元素的宽，高，内边距，外边距，隐藏元素，修改字体，改变元素内容等操作，不仅修改了元素本身的布局，而且还会影响到页面中其他元素的布局。

• 改变 DOM 树的结构

  增删 DOM ，或者移动 DOM 。

• 获取一些特定属性的值

  offsetTop ， offsetLeft , offsetWidth , offsetHeight

  scrollTop ， scrollLeft , scrollWidth , scrollHeight

  clientTop ， clientLeft , clientWidth , clientHeight

  这些属性的同一个特点就是讲究 即时计算 。

  为了更精确地得到这些值，浏览器会通过重排，重新绘制一遍，为的就是 即时性 和 准确性 。

重绘

重绘，可以将它理解为 重新绘制。

简而言之，让元素换一个外观，但不需要重新布局 。

例如，换个背景色，换个前景色，设置可见性，添加一个滤镜等操作。

总结

重排一定会触发重新布局，而重绘不会触发重新布局。

重排一定会触发重绘，而重绘不一定需要重排

重排在性能开销上一定比重绘高