浅谈JS重绘与回流

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 ，因为前者只会引起重绘，后者会引发回流

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