回流（重排） | 前端知识

# 回流（重排）

当render tree中的一部分(或全部)因为元素的 规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。

当页面布局和几何属性改变时就需要回流

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

回流必将引起重绘，而重绘不一定会引起回流

盒子模型相关属性

定位属性及浮动

文字结构

将重绘，回流的影响范围限制在单独的图层之内。给需要频繁更新的元素设置 transtrom， will-change属性，这时会新建一个图层。他们的回流重绘不会影响其他图层。
不要一条一条地修改 DOM 的样式，预先定义好 class，然后修改 DOM 的 className

div.width = '100px';
div.height = '100px';
div.top = '100px';

.action {
  width:'100px';
  height:'100px';
  top: '100px';
}

div.className = 'action';

把 DOM 离线后修改，比如：先把 DOM 给 display:none (有一次 Reflow)，然后你修改100次，然后再把它显示出来. 因为修改display:none 的元素不会触发回流重绘。
不要在循环里读取位置属性，例如offsetHeight,offsetWidth, clientHeight, clientWidth.

let doms = [];
for(var i = 0; i < doms.length; i++) {
  let clientHeight = doms[i].clientHeight;
}