是什么

• 回流：浏览器根据样式重新计算元素的大小和位置
• 重绘：浏览器根据样式，绘制不包含位置及大小的特性如背景、颜色、阴影

触发时机

回流

• 首次渲染
• 添加删除可见的DOM元素
• 元素的位置发生变化
• 元素的几何属性发生变化（大小、边框等）
• 内容变化
• 浏览器尺寸变化
• js获取值
  • offset系列
  • client系列
  • scroll系列
  • window.getComputedStyle(ele)

document.documentElement.clientHeight

重绘

• 颜色变化
• 文本方向的变化
• 阴影的修改

优化

浏览器自身优化

浏览器将修改操作放入队列中， 直到过了一段时间或者到了阈值，才执行队列并清空

获取即时信息时会强制更新队列

主动优化

• 避免使用table
• 避免使用js表达式
• 样式使用class，避免多项内联样式
• 动画层使用postion:absolute/fixed
• 使用css3硬件加速，如transform, opacity, z-index

js表达式优化

• 缓存，一次性应用

// 缓存offsetLeft与offsetTop的值
const el = document.getElementById('el') 
let offLeft = el.offsetLeft, offTop = el.offsetTop

// 在JS层面进行计算
for(let i=0;i<10;i++) {
  offLeft += 10
  offTop  += 10
}

// 一次性将计算结果应用到DOM上
el.style.left = offLeft + "px"
el.style.top = offTop  + "px"

• 样式合并

<style>
    .basic_style {
        width: 100px;
        height: 200px;
        border: 10px solid red;
        color: red;
    }
</style>
<script>
    const container = document.getElementById('container')
    container.classList.add('basic_style')
</script>