浏览器的回流和重绘

标签：很多   动画   spl   form   tco   距离   屏幕   const   浮动   

重绘（Repaint)和回流（Reflow）

什么是回流

通过构造render tree，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。

当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就成为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分的渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称之为重绘。

什么是重绘

当render tree中的一些元素需要更新属性时，而这些属性只是影响元素的外观，风格而不会影响布局的时候，比如background-color。则就称为重绘

区别

回流必将引起重绘，重绘不一定引发回流，回流所需的成本比重绘高很多，改变父节点里的子节点很可能会导致父节点的一系列回流。

何时发生回流重绘

• 添加或删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化(包括外边距，内边距，边框大小，高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代或者字体改变
• 页面一开始渲染的时候
• 浏览器窗口尺寸的变化（因为回流是根据视口的大小来计算元素的位置和大小的）
• 定位或者浮动，盒模型等

浏览器的优化机制

由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列中，知道过了一段时间或者操作达到了一个阈值，才清空队列。进行一个批处理，这样就会让多次的回流、重绘变成一次回流重绘。但是当获取布局信息的操作的时候，会强制队列刷新，比如访问一下属性或者使用以下方法：

• offsetTop, offsetLeft, offsetWidth, offsetHeight（位置：相对于已定位祖先元素的位置，屏幕尺寸：包含元素的边框和内边距，除去外边距）
• scrollTop, scrollLeft, scrollWidth, scrollHeight（位置：指定元素的滚动条的位置，尺寸：元素的内容区域加上它的内边距再加上任何溢出内容的尺寸）
• clientTop, clientLeft, clientWidth, clientHeight（位置：返回元素的内边距的外边缘和它的边框的外边缘之间的水平距离和垂直距离，通常这些值就等于左边和上边的边框宽度。尺寸：不包含边框大小，只包含内容和它的内边距，也不包含滚动条）
• getComputedStyle()
• getBoundingClientRect()

因此我们在修改样式的时候，最好避免使用上面列出的属性，它们都会刷新渲染队列。如果要使用，最好将值缓存起来。

减少重绘和回流

• 使用transform替代top
• 使用visibility替换display:none, 因为前者只会引起重绘，而后者会引起回流
• 不要使用table布局，可能很小的一个改动会造成整个table的重新布局
• 动画实现的速度选择，动画速度越快，回流次数越多，也可以选择使用requestAnimationFrame
• CSS选择符从右往左匹配查找，避免层级过多
• 将频繁重绘或回流的节点设置为图层，图层能够阻止该节点渲染行为影响别的节点。比如video标签，浏览器会自动将该节点变为图层
• 合并多次对DOM和样式的修改，然后一次处理掉

  // 以下三个样式属性都被修改了，每个都影响元素的几何结构，引起回流。当然，大部分现代浏览器都对其做了优化，因此，只会触发一次重排。但是如果在旧版的浏览器或者在上面代码执行的时候，有其他代码访问了布局信息(上文中的会触发回流的布局信息)，那么就会导致三次重排。
  const el = document.getElementById(‘test‘);
  el.style.padding = ‘5px‘;
  el.style.borderLeft = ‘1px‘;
  el.style.borderRight = ‘2px‘;
  
  // 合并所有的改变然后一次处理
  const el = document.getElementById(‘test‘);
  el.style.cssText += ‘border-left: 1px; border-right: 2px; padding: 5px;‘;

   

• 当我们需要对DOM做一系列操作时，可以通过以下步骤减少回流重绘次数
  • 使元素脱离文档流(隐藏元素/使用文档片段(fragment)在当前DOM之外构建一个子树，再把它拷贝回文档/将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素）
  • 对其进行多次修改
  • 将元素带回到文档中
• 对于复杂动画效果，可以使用绝对定位使其脱离文档流。否则会引起父元素及后续元素的频繁回流
• CSS3硬件加速(GPU加速）：使用CSS3硬件加速，可以让transform，opacity，filters这些动画不会引起回流重绘。但是对于动画的其他属性，如background-color，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。但是如果为太多元素使用css3硬件加速，会导致内存占用较大，会有性能问题。

浏览器的回流和重绘

标签：很多   动画   spl   form   tco   距离   屏幕   const   浮动   

原文地址：https://www.cnblogs.com/jett-woo/p/12658599.html