js性能优化之函数节流
2017-04-25 11:42
411 查看
最近在看一些书的时候,以及面试题的时候看到一个新词“函数节流”
函数节流的场景出现在,Js中很多函数的触发并不是用户直接控制的,在这些情况下,函数可能会被非常频繁的调用,而造成大的性能问题。
mouseover事件
上传进度
比如这行代码
因此这个节流函数有两个参数,一个是需要被执行的函数,另一个是延迟的时间
这是没有使用节流函数前
使用节流函数后
函数节流的场景出现在,Js中很多函数的触发并不是用户直接控制的,在这些情况下,函数可能会被非常频繁的调用,而造成大的性能问题。
函数被频繁调用的场景
window.onresize事件。mouseover事件
上传进度
函数节流的原理
比如我们在window.onresize事件中要打印当前浏览器窗口的大小,在我们通过拖拽来改变窗口大小时候,打印窗口大小这个工作1s就运行了10次。而实际上我们只需要2次或者3次。比如这行代码
window.onresize = function() { console.log(1); }
分流函数实现的思路
实现的思路就是将即将被执行的函数用setTimeout延迟一段时间再执行。如果该次执行还没有完成,则忽略下面调用该函数的请求。因此这个节流函数有两个参数,一个是需要被执行的函数,另一个是延迟的时间
var throttle = function(fn, interval) { var _self = fn, timer, firstTime = true; return function() { var args = arguments, _me = this; //如果是第一次调用不需要延迟执行 if (firstTime) { _self.apply(_me, args); return firstTime = false; } if (timer) { return false; } timer = setTimeout(function() { clearTimeout(timer); timer = null; _self.apply(_me, args); }, interval || 500) } }
这是没有使用节流函数前
使用节流函数后
相关文章推荐
- js性能优化之函数节流(分流函数)
- JS性能优化 -- 函数节流
- JavaScript 性能优化技巧:函数节流
- JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
- web性能优化之- js自定义函数延迟执行 jquery插件
- JavaScript-性能优化,函数节流(throttle)与函数去抖(debounce)
- JavaScript性能优化技巧之函数节流
- JavaScript性能优化技巧之函数节流
- (转)JavaScript-性能优化之函数节流(throttle)与函数去抖(debounce)
- js性能优化之惰性加载函数
- JavaScript-性能优化,函数节流(throttle)与函数去抖(debounce)
- JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
- Javascript性能优化之 函数节流技术
- js性能优化之函数缓存
- JavaScript性能优化技巧之函数节流
- js性能优化之分时函数
- 【 js 性能优化】【源码学习】underscore throttle 与 debounce 节流
- JavaScript 性能优化技巧:函数节流
- JS性能优化框架
- 新产品为了效果,做的比較炫,用了非常多的图片和JS,所曾经端的性能是非常大的问题,分篇记录前端性能优化的一些小经验。