提示. 回流一定会引起重绘, 重绘不一定引起回流
1.重绘是什么
重绘:在渲染树种的一些元素需要更新属性, 而这些属性只是影响元素的外观、风格、不影响布局（不影响该节点在页面当中的空间位置及大小），譬如某个div标签节点的背景颜色、字体颜色等等发生改变，但是该div标签节点的宽、高、内外边距并不发生变化，此时触发浏览器重绘）
*** 只触发重绘的属性***
color
border-style
border-radius
visibility // 属性元素是否可见 // 即使不可见的元素也会占据页面上的空间
text-decoration // 属性规定添加到文本的修饰。修饰的颜色由 "color" 属性设置。
background
background-image
background-position // 设置背景图像的起始位置
background-repeat // 属性设置是否及如何重复背景图像
background-size
outline-color
outline
outline-style
outline-width
box-shadow
2. 回流是什么
当render treee中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建.这就成为回流(reflow) 当页面布局和几何属性改变时就需要回流
触发页面重新布局的属性
1.盒子模型相关属性会触发充布局 :width height,padding,margin,display,border-width,min-height
2.定位属性及浮动也会触发重布局:top,bottom,left,right,position,float,clear
3.改变节点内部的文字结构也会触发重布局:text-align,overflow-y,font-weight,overflow,font-family,line-height,vertival-align,white-space,font-size
何时发生回流
1. 添加或者删除可见的DOM元素
2. 元素的位置发生变化
3. 元素的尺寸发生变化（包括外边距、内边距、边框大小、高度和宽度等）
4. 内容发生变化，文本或者图片被另一个不同尺寸的图片所代替
5. 页面开始渲染的时候
6. 浏览器的窗口尺寸变化（回流是根据视口的大小来计算元素的位置和大小的）
3.优化策略
1.减少DOM操作
最小化DOM访问次数,尽量缓存访问DOM的样式信息,避免过度触发回流 如果在一个局部方法中需要多次访问同一个DOM,可以在第一次获取元素时用变量保存下来,减少遍历时间. 用事件委托来减少事件处理器的数量 用querySelectorAll替代geiElementByXX()
querySelectorAll()：获取静态集合，通过函数获取元素后，之后的改变并不会影响之前获取后存储到的变量。即获取到元素后与 HTML 中的元素没有关系了。
getElementByXX()：获取动态集合，通过函数获取元素后，之后的改变还是会动态添加到已经获取的元素中。通过此方法获取元素存储到变量时，之后每一次在 JS 函数中使用此变量都会再访问所对应的 HTML 元素。
2. 减少回流
使用vue/react 数据影响视图模式
2. 避免设置大量的 style 内联属性, 通过设置 style 属性改变结点样式, 每次设置都会触发 reflow,应使用class添加样式
3. 不要使用table 布局, 应为 bable 中某个元素触发了reflow,所有table元素都会触发reflow,如果有使用table的场景,可以设置display:none 会造成重排,可以用visibility:hidden 代替
4.使用resize 事件时,做防抖和节流处理,分离读写操作
1.减少使用css表达式,批量处理样式,减少使用js代码修改元素样式,尽量用修改class名的方式操作样式或动画
2.可以吧动画效果应用到 position属性为absolute或flxed的元素上,这样对其他元素影响较小.
3.在动画实现的速度选择上,应牺牲平滑度换取速度,比如实现动画时,以1个像素为单位移动这样最平滑,但是reflow会过于频繁,小号大量CPU资源,以3个像素为单位移动会好很多
4. 开启css3 动画硬件加速,即GPU加速,把渲染计算交给GPU
5.对具有复杂动画的元素使用绝对定位,是他脱离文档流,否则会引起父元素及后续元素频繁回流
### 4. 性能影响
总结: 回流的性能消耗要比重绘大,
### 5. 避免性能影响
