回流（reflow）与重绘（repaint）

Posted 2021-02-12 tiboo

回流与重绘这两个词语经常见到，面试中这两个词语的出现的频率也比较高，每每别人谈到回流与重绘时，哦，这个我知道，但是让我讲个因果所以然，好像嗯。。。好像我并不是懂的很彻底

什么是回流（reflow）？

Render树中部分或全部元素的尺寸、结构、或某些属性（如边距）发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。

什么是重绘（repaint）？

当元素的一部分属性发生改变并不影响它在文档流中的位置时（如： color, background-color），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

==> 从性能方面解析回流

具体什么会影响回流？ 

我们从定义上就知道什么会影响回流，但是影响回流的因素太多，一两句话是无法全面概况，下面详细罗列出影响回流的因素有哪些

1 初次页面加载时，页面渲染初始化

2 浏览器窗口大小发生改变

3 删除或添加某个元素

4 改变某个元素对应的属性（如margin,padding,height,width,border）

5 改变某个元素的内容（如字体大小，文字数量，图片大小）

6 CSS伪类激活

7 查询某些属性或调用某些方法

• clientWidth、clientHeight、clientTop、clientLeft
• offsetWidth、offsetHeight、offsetTop、offsetLeft
• scrollWidth、scrollHeight、scrollTop、scrollLeft
• scrollIntoView()、scrollIntoViewIfNeeded()
• getComputedStyle()
• getBoundingClientRect()
• scrollTo()

回流会造成什么样的结果？

 

如何避免回流？