网页渲染显示过程：

1. 解析 Html ，生成 DOM 树（包含display：none）
2. 以 DOM 树为基础，根据节点的集合属性（解析 CSS）生成 render 树
3. 在 render 树基础上再渲染颜色、背景等属性及其进行布局
4. 绘制显示

CSS 控制元素隐藏

• display：none 不占原来位置
• valibility：hidden 占原来位置

回流(reflow)：render 树部分或者全部因大小或边距发生改变需要重新构建的过程

重绘(repaint)：颜色、背景色变化但布局不会变化而重新渲染的过程

总结：重绘只涉及样式改变而不涉及布局改变；回流一定伴随着重绘，重绘可以单独出现

引起回流原因：

1. 页面初始化渲染
2. DOM 元素发生改变
3. render 树改变
4. 窗口 resize 事件
5. 字体大小改变
6. 特殊：设计内容区域（宽高边距等）属性

减少回流方法

1. 避免逐项更改样式
2. 避免循环操作 DOM
3. 复杂元素绝对定位或固定定位，脱离文档流

避免多次读取涉及宽度的属性