重绘和回流

前言

    在web开发中，或多或少听说过重绘和回流，现总结汇总一些关于此方面的内容。

渲染机制

浏览器的渲染机制一般分为以下几个步骤:

• 处理 HTML 并构建 DOM 树；处理 CSS 构建 CSSOM 树。
• 将 DOM 与 CSSOM 合并成一个渲染树(Render Tree)。
• Layout(回流):根据生成的渲染树来布局，进行回流(Layout)，得到节点的的几何信息(位置，大小)。
• Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素、

• 调用 GPU 绘制，合成图层，显示在屏幕上。
  以下是这个过程中常见的图

  
  demo.png

Layout(回流)

当render tree(渲染树)中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，这就称为回流。简单来说就是布局，几何属性改变就会回流。
会导致回流的操作：

• 页面首次渲染
• 浏览器窗口大小发生改变
• 元素尺寸或位置发生改变
• 元素内容变化（文字数量或图片大小等等）
• 元素字体大小变化
• 添加或者删除可见的DOM元素
• 激活CSS伪类（例如：:hover）
• 查询某些属性或调用某些方法
  一些常用且会导致回流的属性和方法：
• clientWidth、clientHeight、clientTop、clientLeft
• offsetWidth、offsetHeight、offsetTop、offsetLeft
• scrollWidth、scrollHeight、scrollTop、scrollLeft
• scrollIntoView()、scrollIntoViewIfNeeded()
• getComputedStyle()
• getBoundingClientRect()
• scrollTo()

Painting(重绘)

当render tree(渲染树)中的一些元素的外观、风格等不会影响布局的属性改变，比如bachground-color，这就称为重绘。简单的说就是当节点需要更改外观而不会影响布局的

注意：回流一定会触发重绘，而重绘不一定会回流

减少回流和重绘

CSS

• 避免使用table布局。
• 尽可能在DOM树的最末端改变class。
• 避免设置多层内联样式。
• 将动画效果应用到position属性为absolute或fixed的元素上。
• 避免使用CSS表达式（例如：calc()）。

JavaScript

• 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
• 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
  也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
• 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
• 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。