1. 重排和重绘概念

  1. 浏览器下载完页面中的所有组件（HTML,CSS,JavaScript,图片）之后会解析生成两个内部数据结构（DOM树和渲染树）

  2. DOM树表示页面结构，渲染树表示DOM节点如何显示，

  3. 重排是DOM元素的几何变化，DOM树结构变化，渲染树需要重新计算

  4. **重绘是当页面中的元素样式的改变并不影响它在文档流中的位置，比如改变背景，颜色，字体等等，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观，**由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成，但是table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中的节点属性，比同元素要多花两倍时间，因此尽量避免使用table布局

2. 触发重排的情况
  1. 页面渲染初始化时候 ，
  2. 浏览器尺寸变化时，
  3. 元素尺寸发生改变
  4. 元素位置发生改变
  5. 元素内容发生改变
  6. 添加或者删除可见的DOM元素
3.常见的触发重绘的属性
  • color
  • border-style
  • visibility
  • background
  • text-decoration
  • background-image
  • background-position
  • background-repeat
  • outline-color
  • outline
  • outline-style
  • border-radius
  • outline-width
  • box-shadow
  • background-size
4. 性能优化
  1. 减少 DOM 访问，讲多次改变样式属性操作合并成一次操作
  2. 如果需要批量操作 DOM，可以先让元素脱离文档流，操作完在带入文档流，这样只会触发一次重排（fragment元素的应用）
  3. 由于display:none的元素不再渲染树中，对隐藏的元素操作不会引起其他元素的重排
  4. 在内存中多次操作节点完成之后添加到文档中
  5. 尽量不要在布局信息改变时做查询操作（会导致渲染队列强制刷新）

6.需要多次重排的元素，使用 position：absolute 或者 fixed，使其脱离文档流