闲聊前端性能----防抖、节流、重绘与回流。

最新推荐文章于 2024-11-08 15:41:32 发布

diaoyi1932

最新推荐文章于 2024-11-08 15:41:32 发布

阅读量199

点赞数

文章标签：前端 ui ViewUI

原文链接：http://www.cnblogs.com/binguo666/p/10535948.html

版权

在最近，小米9卖的特别火，在官方抢购的时候基本都是一点既空。这不禁让我想到了，官网是怎样控制顾客不停点击发起请求而不导致官网崩溃的呢？这由此引出了前端性能优化中的----防抖和节流。在闲聊完后你就会发现有些时候在抢购商品的时候，你用鼠标在几秒钟不停的按了数十次，或许它仅仅是发送了你第一次点击抢购的那个请求。所以说抢购时间内的第一次点击尤为关键！

下面来介绍一下什么是防抖！

防抖：任务频繁触发的情况下，只有任务触发的间隔超过制定的时间间隔的时候，任务才会被执行。

下面引用一下知乎上的一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>防抖</title>
</head>
<body>
  <button id="debounce">点我防抖！</button>

  <script>
    window.onload = function() {
      // 1、获取这个按钮，并绑定事件
      var myDebounce = document.getElementById("debounce");
      myDebounce.addEventListener("click", debounce(sayDebounce));
    }

    // 2、防抖功能函数，接受传参
    function debounce(fn) {
      // 4、创建一个标记用来存放定时器的返回值
      let timeout = null;
      return function() {
        // 5、每次当用户点击/输入的时候，把前一个定时器清除
        clearTimeout(timeout);
        // 6、然后创建一个新的 setTimeout，
        // 这样就能保证点击按钮后的 interval 间隔内
        // 如果用户还点击了的话，就不会执行 fn 函数
        timeout = setTimeout(() => {
          fn.call(this, arguments);
        }, 1000);
      };
    }

    // 3、需要进行防抖的事件处理
    function sayDebounce() {
      // ... 有些需要防抖的工作，在这里执行
      console.log("防抖成功！");
    }

  </script>
</body>
</html>

这是知乎上的一个例子，创建一个定时器，如果在规定时间内重复触发该事件，就会调用clearTimeout清除掉上一个定时器，重置定时器。也就是说，这件事本来就是需要等待的，并非立即执行的，如果用户反复点击，那只好重新等待了。所以，fn.call(this, arguments) 其实是将不确定变量替换到函数中了。在这之前已经聊过了arguments，可以看下我之前写得闲聊js中的apply、call和arguments

在上面的这个例子中是非立即执行版。当然，我把知乎的例子修改一下它，将它变成立即执行版。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>防抖</title>
</head>
<body>
  <button id="debounce">点我防抖！</button>

  <script>
    window.onload = function() {
      // 1、获取这个按钮，并绑定事件
      var myDebounce = document.getElementById("debounce");
      myDebounce.addEventListener("click", debounce(sayDebounce));
    }

    // 2、防抖功能函数，接受传参
    function debounce(fn) {
      // 4、创建一个标记用来存放定时器的返回值
      let timeout = null;
      //5.创建一个判断是否可点击值
      let doit = true;
      return function() {
        // 5、当doit为真，既用户重复点击时，清除定时器
        if(doit)clearTimeout(timeout);
        //6.当doit为false时，既用户可点击，再将doit设为true，防止用户重复点击
        else{
            fn();
            doit = true;
        }
        //7.设置定时器，这样就能保证点击按钮后的 interval 间隔内
        // 如果用户还点击了的话，就不会执行 将doit设为false函数
        timeout = setTimeout(() => {
          doit = false;
        }, 1000);
      };
    }

    // 3、需要进行防抖的事件处理
    function sayDebounce() {
      // ... 有些需要防抖的工作，在这里执行
      console.log("防抖成功！");
    }

  </script>
</body>
</html>

其原理和立即执行版本一样，只是点击执行的先后顺序不同。

下面我们来聊一下什么是节流吧！

节流：指定时间间隔内只会执行一次任务。

这有点像我们刷抢购一样，当我们在某段时间间隔内触发了多次事件，其实，它只执行一次请求！

下面我们再来引用知乎的一个例子就会明白了！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>节流</title>
</head>
<body>

  <button id="throttle">点我节流！</button>

  <script>
    window.onload = function() {
      // 1、获取按钮，绑定点击事件
      var myThrottle = document.getElementById("throttle");
      myThrottle.addEventListener("click", throttle(sayThrottle));
    }

    // 2、节流函数体
    function throttle(fn) {
      // 4、通过闭包保存一个标记
      let canRun = true;
      return function() {
        // 5、在函数开头判断标志是否为 true，不为 true 则中断函数
        if(!canRun) {
          return;
        }
        // 6、将 canRun 设置为 false，防止执行之前再被执行
        canRun = false;
        // 7、定时器
        setTimeout( () => {
          fn.call(this, arguments);
          // 8、执行完事件（比如调用完接口）之后，重新将这个标志设置为 true
          canRun = true;
        }, 1000);
      };
    }

    // 3、需要节流的事件
    function sayThrottle() {
      console.log("节流成功！");
    }

  </script>
</body>
</html>