持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

大家好,我是大帅子,今天给大家讲一下,把大家几个容易弄混的几个点,接下来,我就用通俗一点的话跟大家讲一下,有什么不懂的,欢迎大家留言讨论

---

1. 回流

元素大小或位置发生改变(就是页面的布局发生改变的情况下),触发了重新布局导致渲染树重新计算布局和渲染,有以下几种情况

如添加或删除可见的DOM元素；
元素的位置发生变化；
元素的尺寸发生变化、
内容发生变化（如文本变化或图片被另一个不同尺寸的图片所代替）；
页面一开始渲染的时候（无法避免）；

2.重绘

元素只改变自身的样式,不会影响到其他的元素,有以下几种情况

元素样式的改变(但宽高、大小、位置不变)
 visibility、color、background-color 等

3.防抖

在单位时间内,高频事件只触发最后一次

常用的就有 : 输入框事件

function throttle(fn,delay){
  let flag = true;

  return function(){
    if(flag){
      flag = false;
      setTimeout(() =>{
        flag = true
      },delay)
      return fn()
    }
  }  
}

4.节流

减少一段时间内触发的频率,就是一定的时间里面只触发一次
滚动条事件

function debounce(fn,delay){
  let timer = null;
  return function(){
    if(timer){
      clearTimeout(timer)
    }\
    timer = setTimeout(fn,delay)
  }
}

---

好了,这边已经给大家介绍到这里,以上是我自己的理解,希望可以帮到大家, 欢迎留言我这边一定会第一时间给大家解答,喜欢的可以点赞收藏
🐣---->🦅         还需努力!大家一起进步!!!