1、什么是重绘、回流
-
重绘(repaint)：当元素样式的改变不影响页面布局时，比如元素的颜色，浏览器将对元素进行的更新，称之为重绘。
常见的重绘操作有：
1，改变元素颜色
2，改变元素背景色 …… -
回流(reflow)：也叫做重排。当元素的尺寸或者位置发生了变化，就需要重新计算渲染树，这就是回流，比如元素的宽高、位置，浏览器会重新渲染页面，称为回流，又叫重排（layout）。
回流是影响浏览器性能的关键因素。因为
一个元素的回流，可能会导致了其所有子元素以及紧随其后的节点、或祖先节点元素，或部分页面或整个页面的回流 关系：回流必定会触发重绘，重绘不一定会触发回流。重绘的开销较小，回流的代价较高。
DOM
样式发生了变化，但没有影响到页面布局时，会触发重绘，而不会触发回流。
重绘由于 DOM 位置信息不需要更新，省去了布局过程，因而性能上优于回流
2、导致回流的操作
1、页面的首次渲染
2、浏览器的窗口大小发生变化
-
3、元素的尺寸或者位置发生变化
- 盒子模型相关属性的改变：
width、height、padding、border、margin、display、border-width、min-height - 定位属性及浮动元素位置的心迹：
top、right、bottom、left、position、float、clear - display属性值的变化
- 元素的字体大小、行内属性发生变化:
font-size、line-height
- 盒子模型相关属性的改变：
-
4、
查询元素的位置属性或通过某些方法获取元素尺寸时1、offsetTop、offsetLeft、offsetWidth、offsetHeight 2、scrollTop、scrollLeft、scrollWidth、scrollHeight 3、clientTop、clientLeft、clientWidth、clientHeight 4、width、height 5、getComputedStyle() 6、getBoundingClientRect()但当你获取元素位置信息的时候，队列中可能有会影响元素位置的操作，
即使没有，浏 览器也会强制清空队列，触发回流与重绘来确保返回正确的值 5、DOM 节点移动、删除、增加
当触发回流时，会导致周围的 DOM 元素重新排列，它的影响范围有两种：
- 全局范围：从根节点开始，对整个渲染树进行重新布局
- 局部范围：对渲染树的某部分或者一个渲染对象进行重新布局
3、只触发页面重绘的属性
- 颜色相关的样式：color、border-color、background-color
- 图片相关的闭幕式: background-image、image
- 边框相关的样式：border-style、border-radius、
- 隐藏相关的：visibility、opacity
- 其它：box-shadow、text-decoration
4、如何减少重绘和回流
4.1、从Javascript角度来看
1、避免频繁操作style
可以通过class一次性修改样式, 而非通过style一个一个修改，这样减少回流与重绘的次数-
2、避免频繁的DOM 操作
-
修改节点时，采用离线模式，离线模式就是克隆要操作的结点, 操作后再与原始结点交换, 这样可以减少dom的操作次数`· -
新增、删除、修改、查找节点时，对同一个节点需多次插入新的dom节点时，可以使用文档片段documentFragment，先插入到文档片段中，再把文档片段一次性插入到指定节点中，因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流。因此，使用文档片段通常会带来更好的性能。 -
将 DOM 的多个读操作（或者写操作）放在一起，而不是读写操作穿插着写。这得益于浏览器的渲染队列机制。
浏览器的渲染队列机制：
浏览器会将所有的回流、重绘的操作放在一个队列中，当队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会对队列进行批处理。这样就会让多次的回流、重绘变成一次回流重绘。 -
-
3、避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个 变量缓存起来。
不要频繁地去获取某个dom节点的位置属性信息（如offsetWidth，offsetHeight, clientWidth, clientHeight），因为这样会大大消耗浏览器的计算性能。（回流，就是利用浏览器的计算性能，重新计算容器的位置）for(var i = 0;i<=10;i++){ var body = document.getElementsByTagName('body')[0] var h = body.offsetHeight; }浏览器回流的缓冲机制，即多个回流会保存在一个栈里面，当这个栈满了浏览器便会一次性触发所有样式的更改且刷新这个栈。但是如果你多次获取这些元素的实际样式，浏览器为了给你一个准确的答案便会不停刷新这个缓冲栈，导致页面回流增加。所以为了避免这个问题，应该用一个变量保存在循环体外。offsetWidth/offsetHeight，会强制刷新缓冲机制
`4.2、从Html / CSS角度来看
- 1、
对动画效果，使用 absolute 或 fixed，使元素脱离文档流，避免影响其他元素的布局。 - 2、
避免使用 table布局，可能很小的一个小改动会造成整个 table 的重新布局。 - 3、
修改 DOM 时，尽可能只修改最末端的节点，这样减少其影响范围。 - 4、
html不要嵌套太深, 否则会加大对页面布局的计算消耗 - 5、
css避免设置多层内联样式,CSS 选择符从右往左匹配查找，避免节点层级过多 - 6、
使用 visibility 替换 display: none，因为前者只会引起重绘，后者会引发回流
