大家好，我是前端嵐楓，一枚二線城市的程序媛，今天主要跟大家分享我整理的前端的一些性能優化，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
網頁展示的過程：
- javascript動畫/往頁面裏添加一些DOM元素
- style確定每個DOM應該用什麼樣式規則
- Layout佈局，計算最終顯示的位置和大小
- Paint繪製DOM，在不同行的層次上繪製
- Composite渲染層合併
用戶scroll和resize行爲會導致頁面不斷的重新渲染，如果綁定的回調函數中大量操作dom也會出現頁面卡頓
優化方案：
一、函數節流（Throttle）
節流就是保證一段時間內，核心代碼只執行一次
打個比方：水滴積攢到一定重量纔會下落
1. 簡易節流函數
//節流我們快速點擊 我可以配置1s內的點擊算一次
<button>快速點擊</button>
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)
防抖就是一段時間內結束後，才能觸發一次事件，如果一段時間結束內再次觸發事件，就會重新計算時間
打個比方：你在電梯中，門快要關了，突然有人準備上來。電梯並沒有改變樓層，而是再次打開電梯門，電梯延遲了改變樓層的功能，但是優化了資源。
1. 引入underscor庫，體驗debounce
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>防抖</title>
<style>
#container{
width: 200px;
height: 100px;
border: 1px solid red;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<!--防抖-->
<div id="container"></div>
<script src="https://unpkg.com/[email protected]/underscore-umd-min.js"></script>
<script>
let btn = document.getElementById('#container');
let count = 0;
function doSomeThing(){
// 可能會做回調或者Ajax請求
container.innerHTML = count++;
}
// 高階函數 防抖
container.onmousemove = _.debounce(doSomeThing, 300);
// 防抖：
//事件響應函數（doSomeThing）在一段時間後才執行，如果在這段時間內再次調用，則重新計算執行時間；當預定的時間內沒有再次調用該函數，則執行響應doSomeThing函數
</script>
</body>
</html>
說明：事件響應函數（doSomeThing）在一段時間後才執行，如果在這段時間內再次調用，則重新計算執行時間；當預定的時間內沒有再次調用該函數，則執行響應doSomeThing函數
2. 簡易防抖函數
function debounce(func, wait, immediate){
let timeout
return function(){
clearTimeout(timeout);
if(immediate){
let callNow = !timeout
if(callNow){
func.apply(this,arguments)
}
}
timeout = setTimeout(()=>{
func.apply(this,arguments)
timeout = null
}, wait)
}
}
function logger(e){
console.log('log -----')
}
btn.addEventListener('click',debounce(logger, 1000, true))
3. 完整版本：
/**
* 防抖的函數
*
* @param {*} func 要調用的函數
* @param {*} wait 延遲時間
* @param {*} immdeidate 是否立即執行
* @returns
* by 前端嵐楓
*/
function debounce(func, wait, immdeidate){
var timeout, result;
var debounced = function(){
//改變執行函數內部this的指向
var context = this;
var args = arguments
if(timeout) {
clearTimeout(timeout)
}
if(immdeidate){
let callNow = !timeout;
timeout = setTimeout(()=>{
timeout = null;
}, wait);
//立即執行
if(callNow) {
result = func.apply(context,args)
}
} else {
timeout = setTimeout(function(){
func.apply(context,args)
}, wait);
}
return result
};
debounced.cancel = function(){
clearTimeout(timeout)
timeout = null
}
return debounced;
}
4. 應用場景
- scroll事件滾動
- 瀏覽器窗口的縮放resize事件
- 搜索框輸入查詢的時候
- 表單驗證
- 按鈕的提交事件
關注：程序員石磊，回覆：001 即可獲取源碼