前端性能优化之节流与防抖互联网的发展促使行内的水平不断提高，程序猿们对于用户的体验效果很是关注，提高APP的性能尤为重要

前端性能优化之节流与防抖

互联网的发展促使行内的水平不断提高，程序猿们对于用户的体验效果很是关注，提高APP的性能尤为重要，用户的体验效果就在于APP的性能，今天我们就来谈一谈前端的性能优化防抖与节流。

前端性能优化基本在于两个大方向:

1. 少加载文件

2. 少执行代码

简单来说前端性能优化就是文件获取优化，代码执行优化。要想了解前端可以从拿些细节方面进行优化，你就必需了解代码的书写、打包、浏览器的渲染......

比如你要了解：

从输入url到页面渲染发生了什么？
浏览器的缓存机制
文件的打包（webpack的打包原理）

图片的使用

1. jpg
  1. 有损压缩
  2. 不支持透明
  3. 用于背景图，轮播图
2. png
  1. 无损压缩，质量高，支持透明
  2. 色彩线条更丰富，通常用于一些小图，比如logo，商品icon
3. svg
  1. 文本，体积小矢量图
  2. 渲染成本高，学习成本高

服务端渲染的使用
等等。。。。。

有兴趣了解前端性能优化的同学可以去百度一下（雅虎军规）

话不多说接下来我们谈一谈性能优化js函数 防抖与节流

1. 防抖函数

在限定的时间内只执行一次

防抖函数主要用于 搜索功能上面，用户在输入框输入值的时候，我们的代码就会执行调用接口请求，来请求后端用户需要的内容，如果用户每输入一个值我们就调用一次接口，这样多次调用接口，就会存在一个很大的资源浪费，所就有了以防抖函数。

代码

下面是一段原生js:

<body>
  <button id="btn">提交</button>
  <script>
    function success(e) {
      console.log('提交成功')
    }
    // 防抖函数
    const debounce = (fun, delay) => {// 1
      let timer = null
      return (...args) => {// 4
        if(timer) {
          clearTimeout(timer)//5
        }
        timer = setTimeout(() => {// 3
          fun.apply(this)// 6
        }, delay)
      }
    }
    const oDebounce = debounce(success, 2000) //2

    let btn = document.getElementById('btn')
    btn.addEventListener('click', oDebounce)
  </script>
</body>

setTimeout第一次执行会被第二次覆盖掉

第一步 **我们先创建一个防抖函数，success函数当做一个接口请求**，

第二步 **把接口请求函数和调用接口定时时间当做参数传给bebounce()**

第三步 **在防抖函数内加入一个定时器，调用接口函数放入定时器**

第四步 **return出这个定时方法**

第五步  当用户一直点击提交按钮时代码就会一直调用接口请求（success函数），这时候我们加个判读，
    当上一个setTimeout任务还在执行的时候，就清除上一个setTimeout任务，再执行新的setTimeout任务

第六步 **接收参数 绑定this作用域**

1. 节流函数

让一个函数不要执行得太频繁，减少一些过快的调用来节流
一句话总结：节流就是保证一段时间内只执行一次核心代码

节流函数主要应用 上拉刷新..... 对函数的调用频率加以限制，但是与防抖有所不同，我们不是要在每完成等待某个时间后去执行某函数，而是要每间隔某个时间去执行某函数，避免函数的过多执行。

代码

<body>
  <button id="btn">提交</button>
  <script>
    function success(e) {
      console.log('提交成功')
    }
    // 防抖函数
    const debounce = (fun, delay) => {// 1
      let flag = true //5
      return (...args) => { // 4
        if (!flag) return
        
        flag = false // 6
        timer = setTimeout(() => { // 3
          fun.apply(this, args) 
          flag = true
        }, delay)
      }
    }
    const oDebounce = debounce(success, 2000) //2

    let btn = document.getElementById('btn')
    btn.addEventListener('click', oDebounce)
  </script>
</body>

节流多了一个开关flag同学们细品
第二次执行的时候 flag为false直接return并不是清除定时器，等第一个执行完的时候，flag为true了，第二个定时器开始执行，以此类推。

以上是小编对节流和防抖的理解，希望对各位有帮助，感谢！！！

一点点积累，从小白走向大佬------

前端性能优化之节流与防抖