性能优化之节流、防抖

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；

转载于:https://www.cnblogs.com/colima/p/7163057.html

性能优化之节流、防抖相关推荐

网页性能优化03-函数防抖
1.1-函数防抖 1.函数防抖介绍 1.什么是函数防抖? (debounce) 网上主流解释:函数防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行 ...
性能优化之节流（throttling）与防抖(debounce)
前言首先来举个例子.百度首页的百度输入框,用户输入的时候,每次输入的信息,我们都能看到百度服务器返回给我们的联想关键字.我们每改动一个字,它就换一次联想词,这是我们肉眼能看到的速度,实际上如果不加以 ...
关于前端性能优化问题，认识网页加载过程和防抖节流
前端性能优化-网页加载过程.性能优化方法.防抖和节流一.网页加载过程 1.加载资源的形式 2.加载资源的过程 3.渲染页面的过程 4.关于window.onload 和 DOMContentLoad ...
前端性能优化经典：javascript防抖节流
大家好,我是前端岚枫,一枚二线城市的程序媛,今天主要跟大家分享我整理的前端的一些性能优化,js防抖节流,它是项目比较常见的性能优化方案,也是面试中常遇到的问题.希望下面文章对大家有所帮助. 我们在 ...
前端性能优化之防抖-debounce
这周接到一个需求-给输入框做模糊匹配.这还不简单,监听input事件,取到输入值去调接口不就行了? 然而后端小哥说不行,这个接口的数据量非常大,这种方式调用接口的频率太高,而且用户输入时调用根本没有必 ...
前端服务器获取js文件偶尔慢_我所认识的前端性能优化
现象: 用户体验差网页太卡打不开(卡.慢) 服务器带宽流量(成本) 服务器压力从哪处理:各处的缓存地址缓存减少DNS的解析请求.预解析DNS(不是"解析DNS") TCP缓 ...
Vue 防抖节流详细介绍（面试常客、去繁从简、性能优化）
本文主要介绍js中的防抖和节流以及在vue项目中如何使用它们来达到性能优化的目的. 前置知识点:js.闭包.es6.vue等. 使用背景: 很多场景下,页面具有交互性,免不了会触发一些事件以及发送一些 ...
前端性能优化总结/懒加载、函数节流、优化dom操作、雪碧图、合并文件
1.减少 HTTP 请求数量在浏览器与服务器进行通信时,主要是通过 HTTP 进行通信.浏览器与服务器需要经过三次握手,每次握手需要花费大量时间.而且不同浏览器对资源文件并发请求数量有限(不同浏览器 ...
vue 实现广告悬浮效果,并防抖性能优化
节流防抖参考link:https://blog.csdn.net/zuorishu/article/details/93630578 <template><img :src=&quo ...