一、为啥要防抖或节流？
为了优化高频率事件，比如onscroll滚动、oninput搜索框、resize窗口大小变化、onkeydown、onkeyup等等，这些高频率事件很有可能造成页面卡顿，影响用户体验。为啥高频事件就会导致页面卡顿呢？这些又跟页面的渲染有关系。
-
前端的渲染过程
web页面的展示过程：
Javascript -> Style -> Layout -> Paint -> Composite
一般我们会使用Javascript来实现一些视觉变化的效果，比如做一个动画或添加一些dom元素；
Style阶段确定每个DOM应该用什么css样式规则；
Layout，布局，这一步具体计算每个dom元素最终在屏幕上显示的大小和位置；
Paint，绘制阶段，进行dom的绘制（包括绘制文字、颜色、图像、边框和阴影等dom元素所有的可视效果）。一般来说，这个绘制过程是在多个层上完成的。
-
Composite：渲染层合并，在每个层上完成绘制过程之后，浏览器会将所有层按照合理的顺序合并成一个图层，然后显示在屏幕上。（所以做一些动画效果尽量使用css3的transform等属性，因为该属性是脱离文档流，不用合并渲染层的）。
样式变化是重绘，布局和位置变化是重排。重排一定导致重绘，重绘不一定导致重排。
网页生成的时候，至少会渲染（Layout+Paint）一次，用户访问过程中，还会不断的重排（reflow）和重绘（repaint），用户scroll行为resize行为会导致页面不断的进行重新渲染，而且间隔频繁，容易造成浏览器卡帧。运用防抖和节流可以有效降低代码的执行效率，从而解决高频率事件的页面卡顿问题。
节流
什么是节流：是保证一段时间内，代码只执行一次。比如设置每一秒执行一次。
-
节流实现：
var throttle = function(func,delay){ var timer = null return function(){ var context = this var args = arguments if(!timer){ timer = setTimeout(() => { func.apply(context,args) timer = null }, delay); } } } function handle(){ } window.addEventListener('scroll',throttle(handle,1000))
防抖
-
什么是防抖：是在一段时间结束之后，才触发一次事件。如果一段时间内未结束再次触发了事件，那么就会重新计算这段时间。
-
防抖实现：
function debounce(func,wait){ var timeout return function(){ clearTimeout(timeout) timeout = setTimeout(func,wait) } } function handle(){ } window.addEventListener('scroll',debounce(handle,1000))
-
使用场景：
- 防抖：实时搜索（keyup），拖拽（mousemove）。
- 节流：窗口调整（resize），页面滚动（scroll），抢购和疯狂点击（mousedown）
总结：
节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。
防抖：前面的所有的触发多被取消，最后一次执行在规定的时间之后才会触发，也就是说如果连续快速的触发，只会执行一次。
