一、介绍
在某些特定场景下,函数可能会被频繁的调用,回调中又会发生DOM操作,浏览器继而重排与重绘,造成很严重的性能问题。
二、案例
例如:window.onresize / window.onscroll、频繁的onmousemove onkeyup
解决类似问题:函数防抖(debounce)、函数节流(throttle),核心就是限制一个函数的频繁触发
函数防抖:
顾名思义,利用函数实现防抖动,触发函数时,元素的位置或者尺寸发生变化,导致页面回流,进而元素抖动,通过函数防抖,使得函数在一定时间内延迟执行一次,从而减少页面回流
通过定时器延迟执行当前函数
function debounce(fun, time = 800){
clearTimeout(fun.timer)
fun.timer = setTimeout(function = > {
fun()
},time)
}
debounce(scroll())
函数防抖基本实现,会发现当前的event对象为undefined,强制绑定this,并且赋值参数
function debounce(fun, time = 800){
clearTimeout(fun.timer)
fun.timer = setTimeout(function = > {
fun.apply(this,arguments)
},time)
}
debounce(scroll())
函数节流:
限制函数执行的频率,如果当前函数未执行完毕,未来的执行都会被忽略
function throttle(fun, time = 800) {
if (fun.timer) return
fun.timer = setTimeout(function = > {
fun.apply(this,arguments)
clearTimeout(fun.timer)
},time)
}
debounce(scroll())