面试汇总——重绘和重排的区别

本文是面试汇总分支——重绘和重排的区别。

重绘不一定需要重排(比如颜色的改变),重排必然导致重绘(比如改变网页位置)

DOM的变化影响了元素的几何属性,浏览器需要重新计算元素的几何属性,同时其他元素的几何属性和位置也会受到影响,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树,这个过程是重排,浏览器会重新绘制受到影响的部分到屏幕,这个过程叫重绘。

1>重排(Reflow):当渲染树的一部分必须更新并且节点的尺寸发生了变化,浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。

2>重绘(Repaint):是在一个元素的外观被改变所触发的浏览器行为,浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。比如改变某个元素的背景色、文字颜色、边框颜色等等

3>引发重排

1.添加、删除可见的dom

2.元素的位置改变

3.元素的尺寸改变(外边距、内边距、边框厚度、宽高、等几何属性)

4.页面渲染初始化

5.浏览器窗口尺寸改变

6.获取某些属性。当获取一些属性时,浏览器为取得正确的值也会触发重排,它会导致队列刷新,这些属性包括:offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。所以,在多次使用这些值时应进行缓存。

4>优化:

浏览器自己的优化:

浏览器会维护1个队列,把所有会引起重排,重绘的操作放入这个队列,等队列中的操作到一定数量或者到了一定时间间隔,浏览器就会flush队列,进行一批处理,这样多次重排,重绘变成一次重排重绘

减少 reflow/repaint:
(1)不要一条一条地修改 DOM 的样式。可以先定义好 css 的 class,然后修改 DOM 的 className。

(2)不要把 DOM 结点的属性值放在一个循环里当成循环里的变量。
(3)为动画的 HTML 元件使用 fixed 或 absoult 的 position,那么修改他们的 CSS 是不会 reflow 的。
(4)千万不要使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。(table及其内部元素除外,它可能需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。这也是为什么我们要避免使用table做布局的一个原因。)

(5)不要在布局信息改变的时候做查询(会导致渲染队列强制刷新)

感谢:重绘和重排

 

posted @ 2019-04-09 16:07 习惯沉淀 阅读(...) 评论(...) 编辑 收藏