大家好，我是前端岚枫，一枚二线城市的程序媛，今天主要跟大家分享我整理的前端的一些性能优化，js防抖节流，它是项目比较常见的性能优化方案，也是面试中常遇到的问题。希望下面文章对大家有所帮助。
我们在做项目过程中会用一些方法，比如防抖、节流、去重、深拷贝浅拷贝、数组扁平化、乱序、柯里化等经典。
我们平时在开发的时候，会有很多场景会频繁触发事件，比如搜索框实时发请求，onmousemove,onscroll oninput resize onkeyup keydown等等，我们需要优化这些高频率事件，降低代码执行频率，这时候
优化高频率事件onscroll oninput resize onkeyup keydonw...降低代码执行频率，这个时候就需要用到函数防抖和函数节流了。
比较常见的两个库就是underscore 和lodash,这个javascript中都有防抖节流的函数， 想了解更多可以参考以下文档地址。
underscore文档地址： https://underscorejs.net/#throttle
lodash文档地址： https://www.lodashjs.com/docs/lodash.throttle
网页展示的过程：
image.png
- javascript动画/往页面里添加一些DOM元素
- style确定每个DOM应该用什么样式规则
- Layout布局，计算最终显示的位置和大小
- Paint绘制DOM，在不同行的层次上绘制
- Composite渲染层合并
用户scroll和resize行为会导致页面不断的重新渲染，如果绑定的回调函数中大量操作dom也会出现页面卡顿
优化方案：
一、函数节流（Throttle）
image.png
节流就是保证一段时间内，核心代码只执行一次
打个比方：水滴积攒到一定重量才会下落
1. 简易节流函数
//节流我们快速点击 我可以配置1s内的点击算一次
function throttle(func, wait){
let previous = 0; //上一次的默认值
return function(){
let now = Date.now()
if(now - previous> wait){
func.apply(this, arguments);
previous = now
}
}
}
function logger(e){
console.log('log -----')
}
btn.addEventListener('click',throttle(logger, 1000))function throttle(method, dalay){
2. 完整版：
function throttle(func, wait,options){
// trailing最后一次应该触发（默认触发）
//leading 延迟执行
let args, context, previous = 0,timeout = null;
let later = function(){
previous = options.leading === false ? 0 : Date.now();
func.apply(context, args)
}
let throttled = function (){
args = arguments;
context = this;
let now = Date.now(); //现在时间
if(!previous && options.leading === false){
previous = now
}
let remaning = wait - (now-previous);
if(remaning <= 0) { //第一次
if(timeout){}
clearTimeout(timeout)
timeout = null
func.apply(this, args)
previous = now
} else if(!timeout && options.trailing !== false) {
timeout = setTimeout(later, remaning)
}
}
return throttled
}
function logger(){
console.log('logger')
}
btn.addEventListener('click',throttle(logger, 1000,{trailing: true, leading: false}))
原理：如果持续触发事件，每隔一段时间，只执行一次事件
3. 应用场景
- DOM元素拖拽功能实现
- 计算鼠标移动距离
- 监听scroll滚动事件
二、防抖(Debounce)
image.png
防抖就是一段时间内结束后，才能触发一次事件，如果一段时间结束内再次触发事件，就会重新计算时间
打个比方：你在电梯中，门快要关了，突然有人准备上来。电梯并没有改变楼层，而是再次打开电梯门，电梯延迟了改变楼层的功能，但是优化了资源。
1. 引入underscor库，体验debounce
防抖