JS—节流与防抖

一、js防抖和节流

在进行窗口的resize、scroll、输出框内容校验等操纵的时候，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常之差。那么为了前端性能的优化也为了用户更好的体验，就可以采用防抖（debounce）和节流（throttle）的方式来到达这种效果，减少调用的频率。

二、为什么滚动scroll、窗口resize等事件需要优化

滚动事件的应用很频繁：图片懒加载、下滑自动加载数据、侧边浮动导航栏等。

在绑定scroll、resize事件时，但它发生的时候，它被触发的频率非常高，间隔很近。在日常开发的页面中，事件中涉及到的大量的位置计算、DOM操作、元素重绘等等这些都无法在下一个scroll事件出发前完成的情况下，浏览器会卡帧。

三、滚动和页面渲染前端性能优化的关系

为什么滚动需要优化？前面提到了事件中涉及到大量的位置计算、DOM操作、元素重绘等等，这些又与页面的渲染有关系，页面渲染又与前端的性能优化有关系？套娃一样，一层套着一层，每一层都联系紧密，每一层都如此平凡且重要。

review一下前端的渲染和优化

web页面展示经历的步骤：js—style—layout—paint—composite，简单回顾一下，在这里不做详细的介绍哦！

网页生成的时候，至少会渲染（Layout+Paint）一次。用户访问的过程中，还会不断重新的重排（reflow）和重绘（repaint），用户scroll行为和resize行为会导致页面不断的进行重新渲染，而且间隔频繁，容易造成浏览器卡帧。

四、防抖Debounce

（1）防抖Debounce情景

①有些场景事件触发的频率过高（mousemove onkeydown onkeyup onscroll）

②回调函数执行的频率过高也会有卡顿现象。 可以一段时间过后进行触发去除无用操作

（2）防抖原理

一定在事件触发 n 秒后才执行，如果在一个事件触发的 n 秒内又触发了这个事件，以新的事件的时间为准，n 秒后才执行，等触发事件 n 秒内不再触发事件才执行。

官方解释：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

（3）防抖函数简单实现

    //简单的防抖函数
    function debounce(func, wait, immediate) {
        //定时器变量
        var timeout;
        return function () {
            //每次触发scrolle，先清除定时器
            clearTimeout(timeout);
            //指定多少秒后触发事件操作handler
            timeout = setTimeout(func, wait);
        };
    };
    //绑定在scrolle事件上的handler
    function handlerFunc() {
        console.log('Fail');
    }
    function handlerFuncTrue() {
        console.log('Success');
    }
    //没采用防抖动
    window.addEventListener('scroll', handlerFunc);
    //采用防抖动
    window.addEventListener('scroll', debounce(handlerFuncTrue, 1000));

（4）防抖函数的演化过程

①this event绑定问题

    //以闭包的形式返回一个函数，内部解决了this指向的问题，event对象传递的问题
    function debounce(func, wait) {
        var timeout;
        return function () {
            var context = this;
            var args = arguments;
            clearTimeout(timeout)
            timeout = setTimeout(function () {
                func.apply(context, args)
            }, wait);
        };
    };