性能优化之节流、防抖

1. 防抖：

• 由于dom操作极其昂贵，所以尝试过多的dom操作有可能会将浏览器搞崩溃，比如onresize、onscroll这类事件操作；
• 为了解决这个问题，引出防抖的概念（某些代码不可以在没有间断的情况下连续重复执行）；
• 方案：第一次调用函数创建一个定时器，在指定时间之后执行代码；在第二次调用时，清除掉前一次的定时器并重新设置一个；
• 这种方案下，如果第一个定时器已经执行，这个操作就没意义；如果第一个没执行，则将其替换为新的定时器；目的是只有在执行函数的请求停止一段时间后才执行；
• 适用于代码是周期执行的，但是你不能控制请求执行的速率；
• 函数防抖让一个函数只有在你不断触发后停下来歇会才开始执行，中间你操作得太快它直接无视。
  

  // 函数防抖
  function debounce(method, context) {
      clearTimeout(method.tid);  // mthod是真实要执行的函数，context是执行的作用域（默认window）
      method.tid = setTimeout(function() {
          method.call(context)   // 确保方法在适当的环境中执行
      }, 100);
  }
  
  // onscroll时函数防抖
  function scrollFun() {
      var marginBot = 0;
      if (document.documentElement) {
          marginBot = document.documentElement.scrollHeight - (document.documentElement.scrollTop+document.body.scrollTop) - document.documentElement.clientHeight;
      } else {
          marginBot = document.body.scrollHeight - document.body.scrollTop - document.body.clientHeight;
      }
      if(marginBot <= 0) {
          // 滚动到底部加载数据操作
      }
  }
  window.onscroll = function() {
      debounce(scrollFun);
  }

   

2. 节流

• 如果我们不希望每次都是要事件结束后等待延迟时间后执行回调；

• 我们可以先给定一个时间段duration，过了这个时间段以后我们执行相应的操作；如果没有过这个时间段，那么就按照函数节流的思路，开关定时器就ok。

function throttle(method, delay, duration){
    var timer = null, stime = new Date();          // 记录下开始执行函数的时间
    return function() {
        var context = this, args = arguments,
        ctime = new Date();   // 记录下当前时间
        
        clearTimeout(timer);     // 函数节流里的思路

        // 记录下的两个时间相减再与duration进行比较
        if (ctime - stime >= duration) {
            method.apply(context, args);
            stime = ctime;
        }
    }
}

window.onresize = throttle(method, 50, 100);
// 50ms的间隔内连续触发的调用，后一个调用会把前一个调用的等待处理掉，但每隔100ms至少执行一次

3. 滚动实例区分下：

    normal：滚动会立即触发事件执行；

    throttle： 延迟100ms直到100ms以内没有事件触发之后执行，这样如果一直在操作，有可能一直不会触发事件发生；

    debounce：50ms的间隔内连续触发的调用，后一个调用会把前一个调用的等待处理掉，但每隔100ms至少执行一次。

4. 滚动到目标节点：

• 获取目标节点偏移量var len = $('target').offset().top或document.querySelector('target').offsetTop；
• 滚动$('body').animate(scrollTop: len)或document.querySelector('body').scrollTop = len；