js前端性能优化之函数节流和函数防抖

更新日期: 2018-12-22阅读量: 1350标签: 优化

前言:

针对一些会频繁触发的事件如scroll、resize,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能


节流:

节流:使得一定时间内只触发一次函数。 
它和防抖动最大的区别就是,节流函数不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而防抖动只是在最后一次事件后才触发一次函数。 
原理是通过判断是否到达一定时间来触发函数,若没到规定时间则使用计时器延后,而下一次事件则会重新设定计时器

主要有两种实现方法:

  • 时间戳
  • 定时器

时间戳实现:当高频事件触发时,第一次应该会立即执行(给事件绑定函数与真正触发事件的间隔如果大于delay的话),而后再怎么频繁触发事件,也都是会每delay秒才执行一次。而当最后一次事件触发完毕后,事件也不会再被执行了。

var throttle = function(func,delay){
    var prev = Date.now();
    return function(){
        var context = this;
        var args = arguments;
        var now = Date.now();
        if(now-prev>=delay){
            func.apply(context,args);
            prev = Date.now();
        }
    }
}

定时器实现: 当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行;直到delay秒后,定时器执行执行函数,清空定时器,这样就可以设置下个定时器。

var throttle = fucntion(func,delay){
    var timer = null;

    return funtion(){
        var context = this;
        var args = arguments;
        if(!timer){
            timer = setTimeout(function(){
                func.apply(context,args);
                timer = null;
            },delay);
        }
    }
}

当第一次触发事件时,肯定不会立即执行函数,而是在delay秒后才执行。 
之后连续不断触发事件,也会每delay秒执行一次。 
当最后一次停止触发后,由于定时器的delay延迟,可能还会执行一次函数。

综合使用时间戳与定时器,完成一个事件触发时立即执行,触发完毕还能执行一次的节流函数:

var throttle = function(func,delay){
    var timer = null;
    var startTime = Date.now();

    return function(){
        var curTime = Date.now();
        var remaining = delay-(curTime-startTime);
        var context = this;
        var args = arguments;

        clearTimeout(timer);
        if(remaining<=0){
            func.apply(context,args);
            startTime = Date.now();
        }else{
            timer = setTimeout(func,remaining);
        }
    }
}


防抖动:

防抖动:将几次操作合并为一此操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发

// 将会包装事件的 debounce 函数
function debounce(fn, delay) {
  // 维护一个 timer
  let timer = null;

  return function() {
    // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
    let context = this;
    let args = arguments;

    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}


1. 首先,我们为scroll事件绑定处理函数,这时debounce函数会立即调用, 
 因此给scroll事件绑定的函数实际上是debounce内部返回的函数

2. 每一次事件被触发,都会清除当前的 timer 然后重新设置超时调用。 
    这就会导致每一次高频事件都会取消前一次的超时调用,导致事件处理程序不能被触发

3. 只有当高频事件停止,最后一次事件触发的超时调用才能在delay时间后执行

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/1669

JS 代码脏乱差?你需要知道这些优化技巧

JavaScript 是万众瞩目的力量。它是世界上最流行的编程语言。它容易理解,有丰富的学习资源,对初学者非常友好。JavaScript 有着庞大的资源库,对小公司和大企业都颇具吸引力。庞大的 JS 工具和库生态系统为开发者的生产力带来了福音

一种可能比 if-else / switch 更好的方式

这两天做 Code Review 的时候, 发现很多 if-else / switch 语句,并不是特别优雅。 在一些逻辑复杂的地方,看起来比较臃肿, 不是那么好读。

Web前端性能优化

web性能优化,主要分为前端和后台两个部分性能优化,后台性能优化决定了web能不能用,前端优化决定了其好不好用,也就是牵涉到前端用户体验和web易用性等情况,所以前端性能与用户体验是有着极大的关联的。

提升网站页面速度的14条最佳实践

《高性能网站建设指南》一书共列举了14条提升网站速度的方法。减少http请求;使用内容发布网络;添加Expires头;压缩组件;将样式表放在顶部

css代码优化

css代码优化作用与意义:减少占用网页字节;便于维护;让自己写的css代码更加专业。css优化方法:缩写css代码;排列css代码;同属性提取共用css选择器

关于Js防抖与节流的思考

防抖:就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间,防抖注重结果;节流::是让一个函数无法在很短的时间间隔内连续调用

前端资源请求速度优化

当浏览器从第三方服务器请求资源时,必须先将该跨域域名解析为IP地址,然后浏览器才能发出请求,此过程称为DNS解析。DNS作为互联网的基础协议,其解析的速度似乎很容易被网站优化人员忽略,现在大多数新流量乃全已经针对DNS解析进行了优化,比如DNS缓存。

前端的性能优化(针对内容方面)

尽量减少HTTP请求数,80%的终端用户响应时间都花在了前端上,减少DNS查找,避免重定向 重定向用301和302状态码,下面是一个有301状态码的HTTP头:

js查重去重性能优化心得

今天产品反映有个5000条数据的页面的保存按钮很慢,查看代码看到是因为点击保存按钮之后,进行了查重操作,而查重操作是用2个for循环完成了,时间复杂度是O(n^2)。没办法,只能想办法优化一下了。

编写高质量可维护的代码之优化逻辑判断

if else、switch case 是日常开发中最常见的条件判断语句,这种看似简单的语句,当遇到复杂的业务场景时,如果处理不善,就会出现大量的逻辑嵌套,可读性差并且难以扩展。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!