我对重绘和回流的认知

89 阅读1分钟

  先说结论,当重绘发生时不一定发生页面整体的重新加载,就是重绘不一定回流;但是回流发生时就要重新生成渲染树,也就认为回流引发了重绘。

  重绘的本质是页面元素的样式发生改变,浏览器对其重新渲染,但是盒子改变不一定影响页面的布局规划,这个时候浏览器只需要对发生改变的部分元素进行重新加载。而回流则是浏览器重新生成渲染树,重新渲染页面。

  发生重绘时若页面元素的真实宽高及位置没有发生改变,就不会对页面布局产生影响,即改变仅限于盒子内部的元素或盒子的背景,但是盒子的几何属性并没有被改变,如盒子的背景、字体、或者对一个宽高已经写死的盒子的内部进行操作,都不会引发回流,反之则会引发回流。但是回流也有一个特殊的情况,即当浏览器需要获取一些当前页面上的几何属性例如offsettop、offsetleft时,虽然没有改变盒子的几何属性,但是也会发生回流。