前端性能優化

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。只需窗口調整完成後，計算窗口大小。防止重複渲染。

函數節流的應用場景

間隔一段時間執行一次回調的場景有：

• 滾動加載，加載更多或滾到底部監聽
• 谷歌搜索框，搜索聯想功能
• 高頻點擊提交，表單重複提交