前端性能优化

1. 函数防抖（debounce）

//函数防抖
var timer=null;
window.onresize=function(){
clearTimeout(timer);
timer=setTimeout(function(){
 	console.log(12);
 	},1000)
}

2. 函数节流（throttle）

let canRun=true
window.onresize=function(){
if(!canRun) return;
    canRun=false;
	timer=setTimeout(function(){
	console.log(12);
		canRun=true;
	},1000)
}

函数防抖的应用场景

连续的事件，只需触发一次回调的场景有：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

函数节流的应用场景

间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听
• 谷歌搜索框，搜索联想功能
• 高频点击提交，表单重复提交