浏览器回流(重排)和重绘?

回流和重绘是什么?

浏览器是由两个引擎来处理页面工作的, 一个是渲染引擎, 一个是JS引擎. 不同的浏览器它的渲染引擎是不一样的.

在渲染引擎中, 会同时解析html 和 css, 最后会合并成渲染树(render tree), 浏览器会根据渲染树进行布局, 在布局时, 会精确的捕获节点的确切位置和尺寸, 所有的测量单位都会转化为屏幕上的绝对像素, 这一现象称为回流(重排).

在布局完之后, 会立即执行paint stup事件, 将渲染树转换成屏幕的像素, 这个过程称为绘制(重绘), 最后将页面显示在屏幕上.

在用户访问页面时, 浏览器会重复回流和重绘步骤. 所以回流必定会重绘.

什么情况触发回流/ 重绘?

当节点发生布局上的变化的时候会触发回流.
例如:
width、height、padding、margin、display、border-width、border、top、position、font-size、float、text-align、overflow-y、font-weight、overflow、left、font-family、line-height、vertical-align、right、clear、white-space、bottom、min-height、offsetTop…

什么时候重绘呢?
例如: color、border-style、visibility、background、border-radius、box-shadow、background-size

如何提高浏览器性能

使用透明度来代替display none, 减少浏览器的回流行为