大家好，我是前端嵐楓，一枚二線城市的程序媛，今天主要跟大家分享我整理的前端的一些性能優(yōu)化，js防抖節(jié)流，它是項(xiàng)目比較常見的性能優(yōu)化方案，也是面試中常遇到的問題。希望下面文章對大家有所幫助。
我們在做項(xiàng)目過程中會用一些方法，比如防抖、節(jié)流、去重、深拷貝淺拷貝、數(shù)組扁平化、亂序、柯里化等經(jīng)典。
我們平時在開發(fā)的時候，會有很多場景會頻繁觸發(fā)事件，比如搜索框?qū)崟r發(fā)請求，onmousemove,onscroll oninput resize onkeyup keydown等等，我們需要優(yōu)化這些高頻率事件，降低代碼執(zhí)行頻率，這時候
優(yōu)化高頻率事件onscroll oninput resize onkeyup keydonw...降低代碼執(zhí)行頻率，這個時候就需要用到函數(shù)防抖和函數(shù)節(jié)流了。
比較常見的兩個庫就是underscore 和lodash,這個javascript中都有防抖節(jié)流的函數(shù)， 想了解更多可以參考以下文檔地址。
underscore文檔地址： https://underscorejs.net/#throttle
lodash文檔地址： https://www.lodashjs.com/docs/lodash.throttle
網(wǎng)頁展示的過程：
- javascript動畫/往頁面里添加一些DOM元素
- style確定每個DOM應(yīng)該用什么樣式規(guī)則
- Layout布局，計算最終顯示的位置和大小
- Paint繪制DOM，在不同行的層次上繪制
- Composite渲染層合并
用戶scroll和resize行為會導(dǎo)致頁面不斷的重新渲染，如果綁定的回調(diào)函數(shù)中大量操作dom也會出現(xiàn)頁面卡頓
優(yōu)化方案：
一、函數(shù)節(jié)流（Throttle）
節(jié)流就是保證一段時間內(nèi)，核心代碼只執(zhí)行一次
打個比方：水滴積攢到一定重量才會下落
1. 簡易節(jié)流函數(shù)
//節(jié)流我們快速點(diǎn)擊 我可以配置1s內(nèi)的點(diǎn)擊算一次
<button>快速點(diǎn)擊</button>
function throttle(func, wait){
let previous = 0; //上一次的默認(rèn)值
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最后一次應(yīng)該觸發(fā)（默認(rèn)觸發(fā)）
//leading 延遲執(zhí)行
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(); //現(xiàn)在時間
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}))
原理：如果持續(xù)觸發(fā)事件，每隔一段時間，只執(zhí)行一次事件
3. 應(yīng)用場景
- DOM元素拖拽功能實(shí)現(xiàn)
- 計算鼠標(biāo)移動距離
- 監(jiān)聽scroll滾動事件
二、防抖(Debounce)
防抖就是一段時間內(nèi)結(jié)束后，才能觸發(fā)一次事件，如果一段時間結(jié)束內(nèi)再次觸發(fā)事件，就會重新計算時間
打個比方：你在電梯中，門快要關(guān)了，突然有人準(zhǔn)備上來。電梯并沒有改變樓層，而是再次打開電梯門，電梯延遲了改變樓層的功能，但是優(yōu)化了資源。
1. 引入underscor庫，體驗(yàn)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/underscore@1.13.1/underscore-umd-min.js"></script>
<script>
let btn = document.getElementById('#container');
let count = 0;
function doSomeThing(){
// 可能會做回調(diào)或者Ajax請求
container.innerHTML = count++;
}
// 高階函數(shù) 防抖
container.onmousemove = _.debounce(doSomeThing, 300);
// 防抖：
//事件響應(yīng)函數(shù)（doSomeThing）在一段時間后才執(zhí)行，如果在這段時間內(nèi)再次調(diào)用，則重新計算執(zhí)行時間；當(dāng)預(yù)定的時間內(nèi)沒有再次調(diào)用該函數(shù)，則執(zhí)行響應(yīng)doSomeThing函數(shù)
</script>
</body>
</html>
說明：事件響應(yīng)函數(shù)（doSomeThing）在一段時間后才執(zhí)行，如果在這段時間內(nèi)再次調(diào)用，則重新計算執(zhí)行時間；當(dāng)預(yù)定的時間內(nèi)沒有再次調(diào)用該函數(shù)，則執(zhí)行響應(yīng)doSomeThing函數(shù)
2. 簡易防抖函數(shù)
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. 完整版本：
/**
* 防抖的函數(shù)
*
* @param {*} func 要調(diào)用的函數(shù)
* @param {*} wait 延遲時間
* @param {*} immdeidate 是否立即執(zhí)行
* @returns
* by 前端嵐楓
*/
function debounce(func, wait, immdeidate){
var timeout, result;
var debounced = function(){
//改變執(zhí)行函數(shù)內(nèi)部this的指向
var context = this;
var args = arguments
if(timeout) {
clearTimeout(timeout)
}
if(immdeidate){
let callNow = !timeout;
timeout = setTimeout(()=>{
timeout = null;
}, wait);
//立即執(zhí)行
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. 應(yīng)用場景
- scroll事件滾動
- 瀏覽器窗口的縮放resize事件
- 搜索框輸入查詢的時候
- 表單驗(yàn)證
- 按鈕的提交事件
關(guān)注：程序員石磊，回復(fù)：001 即可獲取源碼
