JavaScript 防抖与节流、重绘与回流(分享)

1. 防抖

在一个事件被多次触发时，只会执行最后一次，比如表单登录

<！-- html代码，下面防抖和节流都是使用这个按钮 -->
<button>按钮</button>

// 使用定时器实现
let btn = document.querySelector("button")
let temp = null
btn.addEventListener("click", function () {
  clearTimeout(temp)
  temp = setTimeout(() => {
    console.log(1);
  // 当然这个时间可以自己设置，但是不能为0
  }, 2000)
})

2. 节流

在规定的时间只会触发一次，比如轮播图

// 使用时间戳实现
let btn = document.querySelector("button")
let temp = 0
btn.addEventListener("click", function () {
  let data = +new Date()
  // 每两秒只能触发一次
  if (data - temp > 2000) {
    console.log(1)
    temp = data
  }
})

// 使用setTimeout实现
let btn = document.querySelector("button")
let flag = true
btn.addEventListener("click", function () {
  if (flag) {
    flag = false
    setTimeout(() => {
      flag = true
    }, 2000)
    console.log(1);
  }
})

3. 重绘

当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器
根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘

4. 回流(重排)

当 render 树中的一部分，或者全部因为大小边距等问题，发生改变而需要 DOM 树重
新计算的过程叫做回流

5. 重绘与回流的关系

重绘不一定会回流，回流一定会重绘

6. 减少重绘与回流

1. 需要要对元素进行复杂的操作时，可以先隐藏(display:“none”)，操作完成后再显示
2. 需要创建多个 DOM 节点时，使用 DocumentFragment 创建完后一次性的加入 document 缓存 Layout 属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回
   流
3. 尽量避免用 table 布局（table 元素一旦触发回流就会导致 table 里所有的其它元素回流）
4. 避免使用 css 表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
5. 尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color
6. 批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx