浅谈JS重绘与回流

1、什么是重绘、回流

• 重绘(repaint)：当元素样式的改变不影响页面布局时，比如元素的颜色，浏览器将对元素进行的更新，称之为重绘。

常见的重绘操作有：
1，改变元素颜色
2，改变元素背景色 ……

• 回流(reflow)：也叫做重排。当元素的尺寸或者位置发生了变化，就需要重新计算渲染树，这就是回流，比如元素的宽高、位置，浏览器会重新渲染页面，称为回流，又叫重排（layout）。

回流是影响浏览器性能的关键因素。因为一个元素的回流，可能会导致了其所有子元素以及紧随其后的节点、或祖先节点元素，或部分页面或整个页面的回流

• 关系：回流必定会触发重绘，重绘不一定会触发回流。重绘的开销较小，回流的代价较高。

DOM 样式发生了变化，但没有影响到页面布局时，会触发重绘，而不会触发回流。
重绘由于 DOM 位置信息不需要更新，省去了布局过程，因而性能上优于回流

2、触发页面回流的属性

• 1、盒子模型相关属性的改变：
  width、height、padding、border、margin、display、border-width、min-height

• 2、定位属性及浮动元素位置的心迹：
  top、right、bottom、left、position、float、clear

• 3、节点内部文字结构，行内属性的改变
  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()

但当你获取元素位置信息的时候，队列中可能有会影响元素位置的操作，
即使没有，浏览器也会强制清空队列，触发回流与重绘来确保返回正确的值

• 5DOM 元素移动、删除、增加

3、只触发页面重绘的属性

• color、background-color、visibility、opacity、
• border-style、border-radius、
• box-shadow、outline

4、如何减少重绘和回流

4.1、从Javascript角度来看

• 1、减少样式的操作
  通过class一次性修改样式, 而非通过style一个一个修改，这样减少回流与重绘的次数

• 2、减少 DOM 的操作

  • 修改节点时 ，采用离线模式，离线模式就是克隆要操作的结点, 操作后再与原始结点交换, 这样可以减少dom的操作次数`·
  • 新增、删除、修改、查找节点时，对同一个节点需多次插入新的dom节点时，可以使用文档片段documentFragment，先插入到文档片段中，再把文档片段一次性插入到指定节点中，因为文档片段存在于内存中，并不在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、从CSS角度来看

• 1、使用 visibility替换 display: none ，因为前者只会引起重绘，后者会引发回 流

• 2、使用transform替代 top ;

• 3、将动画节点的 position 属性为 absolute 或 fixed，避免影响其他元素的布局，这样缩小影响范围，不会造成大量回流。

• 4、避免使用 table布局，可能很小的一个小改动会造成整个 table 的重新布局。

• 5、尽可能修改 DOM 树最末端的节点，这样减少其影响范围。

• 6、CSS 选择符从右往左匹配查找，设置css样式时，避免层级过多。

span { color: red; } 
div > a > span { color: red; }

对于第一种设置样式的方式来说，浏览器只需要找到页面中所有的 span 标签， 然后设置颜色，
但是对于第二种设置样式的方式来说，浏览器首先需要找到所 有的 span 标签，然后找到 span 标签上的 a 标签，最后再去找到 div 标签， 然后给符合这种条件的 span 标签设置颜色，这样的递归过程就很复杂。
所以，我们应该尽可能的避免写过于具体的 CSS 选择器，然后对于 HTML 来说也尽 量少的添加无意义标签，保证层级扁平。

• 7、html不要嵌套太深, 否则会加大对页面布局的计算消耗

参考链接：https://www.cnblogs.com/jianxian/p/12077584.html