1. 回流(重排)和重绘区别?
回流(重排),reflow:当 render tree 中的一部分(或全部)因为元素的规模尺寸
,布局
,隐藏
等改变时而需要重新构建;
重绘(repaint):当 render tree 中的一些元素需要更新属性,而这些属性只影响元素的外观
,风格
,而不会影响布局时
,称其为重绘,例如颜色改变等。
注意:每个页面至少需要引发一次
重排+重绘,而且重排(回流)一定
会引发重绘
。
触发重排(回流)的条件:
- 增加或者删除可见的 dom 元素;
- 元素的位置发生了改变;
- 元素的尺寸发生了改变,例如边距,宽高等几何属性改变;
- 内容改变,例如图片大小,字体大小改变等;
- 页面渲染初始化;
- 浏览器窗口尺寸改变,例如 resize 事件发生时等;
技巧:回流理解为流动,流动自然会引起布局的变动;重绘可以理解为表层绘画,那么只是外观的改变。