前端性能优化常问面试题 - 防抖节流

防抖：

定义：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。

存在的意义：如果事件处理函数调用的频率无限制，会加重浏览器的负担，浏览器的性能是有限的，导致用户体验非常糟糕。需要减少调用频率，同时又不影响实际效果。

实现效果：如果短时间内大量触发同一事件，只会执行一次函数。

如何实现：利用 setTimeout()和 clearTimeout()

节流：

定义：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

存在的意义：如果事件处理函数调用的频率无限制，会加重浏览器的负担，浏览器的性能是有限的，导致用户体验非常糟糕。需要减少调用频率，同时又不影响实际效果。

实现效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。

如何实现：利用 setTimeout()和 clearTimeout()

差距：

防抖：过了时间才会触发第一次

   常用于：搜索框input事件、页面resize事件、拖动滚动条事件等
                为什么：因为都是只需要最终值的事件

节流：第一次触发过后 过了时间才会触发第二次

   常用于：按钮、鼠标移动事件等
                为什么：需要先触发一次