函数防抖和函数节流
函数防抖(debounce)
当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间
函数节流(throttle)
预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新
周期
函数节流(throttle)与函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。
函数防抖的应用场景
连续的事件,只需触发一次回调的场景有:
1:搜索框搜索输入。只需用户最后一次输入完,再发送请求
2:手机号、邮箱验证输入检测
3:窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。
函数节流的应用场景
间隔一段时间执行一次回调的场景有:
1: 滚动加载,加载更多或滚到底部监听
2:谷歌搜索框,搜索联想功能
3:高频点击提交,表单重复提交
相同点:
都可以通过使用 setTimeout 实现。
目的都是,降低回调执行频率。节省计算资源。
不同点:
函数防抖,在一段连续操作结束后,处理回调,利用 clearTimeout 和 setTimeout 实现。函数节流,在一段连续操作中,每一段时间只执行一次,频率较高的事件中使用来提高性能。
函数防抖关注一定时间连续触发,只在最后执行一次,而函数节流侧重于一段时间内只执行一次。
2: 什么是事件委托?为什么要用事件委托?
什么是事件委托
事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件。
为什么要用事件委托
因为需要不断的与dom节点进行交互,访问dom的次数越多,引起浏览器重绘与重排的次数也就越多,就会延长整个页面的交互就绪时间,这就是为什么性能优化的主要思想之一就是减少DOM操作的原因;每个函数都是一个对象,是对象就会占用内存,对象越多,内存占用率越大,100个li就要占用100个内存空间。如果要用事件委托,就会将所有的操作放到js程序里面,只对它的父级(如果只有一个父级)这一个对象进行操作,与dom的操作就只需要交互一次,这样就能大大的减少与dom的交互次数,提高性能;
原生 JS 的 window.onload 与 Jquery 的$(document).ready(function(){})
window.onload 是在 dom 文档树加载完和所有文件加载完之后执行一个函数 document.ready 原生中
没有这个方法,jquery 中有 (document).ready 要比 window.onload 先执行
window.onload 只能出来一次,$(document).ready 可以出现多次