小程序性能优化之节流、防抖在小程序中的应用

这几天看了小程序的文档中关于优化的部分，小程序内其实对页面已经做了预加载优化——这也是小程序的宗旨：“更快、更轻”。

但其实即使这样，也没有办法完全挡住一个页面中n多个函数的使用（尤其是没有营养的废函数）…

合理使用小程序事件

小程序的响应式由视图层对事件进行监听，时间处理函数是通过视图层传递到逻辑层处理的。大量无用的事件绑定会大大增加视图层和逻辑层的通信，从而降低其他数据传输的响应时间，造成页面卡顿。尤其是 onPageScroll 这类频繁触发的事件，应该做好节流/防抖处理。

函数节流 ：是指在一段时间内，频繁触发某个函数，而函数的执行结果不会因为触发次数而发生改变，这时候可以使用延迟执行函数的方式，防止函数过多调用而对性能造成影响。最常见的应用场景就是对页面滚动或者改变视口大小的监听，比如​

​onresize​

​​和​

​scroll​

​​事件监听。

函数防抖 ：指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中坐公交车，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车；只有别人不再刷卡了，司机才会开车。

//节流
let canRun=true;
$(window).scroll(()=>{
  if(!canRun){
    //判断是否已空闲，如果还在执行中，则直接return
    return;
  }
  canRun=false;
  setTimeout(()=>{
    canRun=true;
  },300);
});      

//防抖
let timer;
$(window).scroll(()=>{
  if(timer){
    clearTimeout(timer);
  }
  timer=setTimeout(()=>{
    //延时200ms，处理滚动逻辑
  },200);
})