Skip to main content

回流和重绘

回流（reflow）​

回流是指浏览器为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构的过程

触发条件：

  • 调整浏览器窗口的大小
  • JavaScript 计算样式
  • 操作 DOM（添加、修改或删除）
  • 元素内容发生变化（位置、尺寸、图片大小）

重绘（repaint）​

重绘是指当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制

触发条件：

  • 触发回流一定会触发重绘
  • 颜色的改变
  • 文本方向的修改
  • 阴影的修改

减少回流和重绘​

  • 避免多次修改样式，可通过设置类名，减少操作
  • 减少 table 的使用
  • 使用 css3 硬件加速，可以让 transform、opacity、filters 这些动画不会引起回流和重绘
  • 避免使用 css 的 JavaScript 表达式

浏览器渲染机制​

  1. 解析 HTML，生成 DOM 树，解析 CSS，生成 CSSOM 树
  2. 将 DOM 树和 CSSOM 树结合，生成渲染树（Render Tree）
  3. 根据生成的渲染树，进行回流，得到节点的几何信息（位置、大小）
  4. 根据渲染树以及回流得到的几何信息，得到节点的绝对像素
  5. 将像素发送给 GPU ，展示在页面上