防抖和节流的性能优化
2020-06-28 05:11
295 查看
前端开发过程中,有一些事件或者函数,会被频繁地触发(短时间按内多次触发),最常见的例如,onresize,scroll,mousemove ,mousehover 等,这些事件的触发频率很高,不做限制的话,有可能一秒之内执行几十次、几百次,如果在这些函数内部执行了其他函数,尤其是执行了操作 DOM 的函数(浏览器操作 DOM 是很耗费性能的),那不仅会造成计算机资源的浪费,还会降低程序运行速度,甚至造成浏览器卡死、崩溃。这种问题显然是致命的。
除此之外,重复的 ajax 调用不仅可能会造成请求数据的混乱,还会造成网络拥塞,占用服务器带宽,增加服务器压力,显然这个问题也是需要解决的。
防抖:指触发事件后n秒内函数只执行一次,如果n秒内又触发了事件,则会重新计算函数执行时间
<body> <div class="box"></div> <script> var box = document.querySelector(".box") var testDebounce=debounce(move,1000) box.onmousemove = testDebounce function move(ev){ this.innerHTML = ev.clientX } function debounce(fn, wait) { let timer = null return function () { var args=arguments; timer && clearTimeout(timer) timer = setTimeout(()=>{ fn.apply(this,args) timer=null },wait) } } </script> </body>
节流:连续触发事件但是在一段时间内只执行一次函数
时间戳方案
<body> <div class="box"></div> <script> var box = document.querySelector(".box") box.onmousemove = jl(move, 500) function move(ev) { this.innerHTML = ev.clientX } function jl(fn, wait) { let last = 0 return function () { var now = Date.now(); if (now - last > wait) { var args = arguments; fn.apply(this, args) last=now; } } } </script> </body>
定时器方案
<body> <div class="box"></div> <script> var box = document.querySelector(".box") box.onmousemove = jl(move, 500) function move(ev) { this.innerHTML = ev.clientX } function jl(fn, wait) { let timer = null return function () { var args = arguments; if (!timer) { timer = setTimeout(() => { fn.apply(this, args) timer = null }, wait) } } } </script> </body>
相关文章推荐
- js网络请求性能优化之防抖与节流
- 性能优化之——节流和防抖
- 前端性能优化(防抖、节流)
- JavaScript节流和防抖函数与及使用分时函数惰性函数优化性能
- JavaScript 性能优化之节流和防抖
- JavaScript-性能优化,函数节流(throttle)与函数去抖(debounce)
- JavaScript 性能优化技巧:函数节流
- 前端性能优化:高频执行事件/方法的防抖
- 前端性能优化:高频执行事件/方法的防抖
- JavaScript性能优化技巧之函数节流
- 页面优化之高性能函数防抖与节流
- 前端性能优化:高频执行事件/方法的防抖
- js性能优化之函数节流(分流函数)
- 闲聊前端性能----防抖、节流、重绘与回流。
- js性能优化之函数节流
- Javascript性能优化之 函数节流技术
- JavaScript 性能优化技巧:函数节流
- 前端性能优化:高频执行事件/方法的防抖
- JS性能优化 -- 函数节流
- JavaScript-性能优化,函数节流(throttle)与函数去抖(debounce)