有些瀏覽器事件可以在短時間內快速觸發多次,比如調整窗口大小或向下滾動頁面。例如,監聽頁面窗口滾動事件,並且用戶持續快速地向下滾動頁面,那麼滾動事件可能在 3 秒內觸發數千次,這可能會導致一些嚴重的性能問題。
如果在面試中討論構建應用程序,出現滾動、窗口大小調整或按下鍵等事件請務必提及 防抖(Debouncing) 和 函數節流(Throttling)來提升頁面速度和性能。這兩兄弟的本質都是以閉包的形式存在。通過對事件對應的回調函數進行包裹、以自由變量的形式緩存時間信息,最後用 setTimeout 來控制事件的觸發頻率。
Throttle:第一個人說了算
throttle 的中心思想在於:在某段時間內,不管你觸發了多少次回調,我都只認第一次,並在計時結束時給予響應。
先給大家講個小故事:現在有一個旅客剛下了飛機,需要用車,於是打電話叫了該機場唯一的一輛機場大巴來接。司機開到機場,心想來都來了,多接幾個人一起走吧,這樣這趟才跑得值——我等個十分鐘看看。於是司機一邊打開了計時器,一邊招呼後面的客人陸陸續續上車。在這十分鐘內,後面下飛機的乘客都只能乘這一輛大巴,十分鐘過去後,不管後面還有多少沒擠上車的乘客,這班車都必須發走。
在這個故事裏,“司機” 就是我們的節流閥,他控制發車的時機;“乘客”就是因爲我們頻繁操作事件而不斷涌入的回調任務,它需要接受“司機”的安排;而“計時器”,就是我們上文提到的以自由變量形式存在的時間信息,它是“司機”決定發車的依據;最後“發車”這個動作,就對應到回調函數的執行。
總結下來,所謂的“節流”,是通過在一段時間內無視後來產生的回調請求來實現的。只要一位客人叫了車,司機就會爲他開啓計時器,一定的時間內,後面需要乘車的客人都得排隊上這一輛車,誰也無法叫到更多的車。
對應到實際的交互上是一樣一樣的:每當用戶觸發了一次 scroll 事件,我們就爲這個觸發操作開啓計時器。一段時間內,後續所有的 scroll 事件都會被當作“一輛車的乘客”——它們無法觸發新的 scroll 回調。直到“一段時間”到了,第一次觸發的 scroll 事件對應的回調纔會執行,而“一段時間內”觸發的後續的 scroll 回調都會被節流閥無視掉。
現在一起實現一個 throttle:
// fn是我們需要包裝的事件回調, interval是時間間隔的閾值
function throttle(fn, interval) {
// last爲上一次觸發回調的時間
let last = 0
// 將throttle處理結果當作函數返回
return function () {
// 保留調用時的this上下文
let context = this
// 保留調用時傳入的參數
let args = arguments
// 記錄本次觸發回調的時間
let now = +new Date()
// 判斷上次觸發的時間和本次觸發的時間差是否小於時間間隔的閾值
if (now - last >= interval) {
// 如果時間間隔大於我們設定的時間間隔閾值,則執行回調
last = now;
fn.apply(context, args);
}
}
}
// 用throttle來包裝scroll的回調
const better_scroll = throttle(() => console.log('觸發了滾動事件'), 1000)
Debounce:最後一個人說了算
防抖的中心思想在於:我會等你到底。在某段時間內,不管你觸發了多少次回調,我都只認最後一次。
繼續講司機開車的故事。這次的司機比較有耐心。第一個乘客上車後,司機開始計時(比如說十分鐘)。十分鐘之內,如果又上來了一個乘客,司機會把計時器清零,重新開始等另一個十分鐘(延遲了等待)。直到有這麼一位乘客,從他上車開始,後續十分鐘都沒有新乘客上車,司機會認爲確實沒有人需要搭這趟車了,纔會把車開走。
我們對比 throttle 來理解 debounce:在throttle的邏輯裏,“第一個人說了算”,它只爲第一個乘客計時,時間到了就執行回調。而 debounce 認爲,“最後一個人說了算”,debounce 會爲每一個新乘客設定新的定時器。
現在一起實現一個 debounce:
// fn是我們需要包裝的事件回調, delay是每次推遲執行的等待時間
function debounce(fn, delay) {
// 定時器
let timer = null
// 將debounce處理結果當作函數返回
return function () {
// 保留調用時的this上下文
let context = this
// 保留調用時傳入的參數
let args = arguments
// 每次事件被觸發時,都去清除之前的舊定時器
if(timer) {
clearTimeout(timer)
}
// 設立新定時器
timer = setTimeout(function () {
fn.apply(context, args)
}, delay)
}
}
// 用debounce來包裝scroll的回調
const better_scroll = debounce(() => console.log('觸發了滾動事件'), 1000)
用 Throttle 來優化 Debounce
debounce 的問題在於它“太有耐心了”。試想,如果用戶的操作十分頻繁——他每次都不等 debounce 設置的 delay 時間結束就進行下一次操作,於是每次 debounce 都爲該用戶重新生成定時器,回調函數被延遲了不計其數次。頻繁的延遲會導致用戶遲遲得不到響應,用戶同樣會產生“這個頁面卡死了”的觀感。
爲了避免弄巧成拙,我們需要借力 throttle 的思想,打造一個“有底線”的 debounce——等你可以,但我有我的原則:delay 時間內,我可以爲你重新生成定時器;但只要delay的時間到了,我必須要給用戶一個響應。這個 throttle 與 debounce “合體”思路,已經被很多成熟的前端庫應用到了它們的加強版 throttle 函數的實現中:
// fn是我們需要包裝的事件回調, delay是時間間隔的閾值
function throttle(fn, delay) {
// last爲上一次觸發回調的時間, timer是定時器
let last = 0, timer = null
// 將throttle處理結果當作函數返回
return function () {
// 保留調用時的this上下文
let context = this
// 保留調用時傳入的參數
let args = arguments
// 記錄本次觸發回調的時間
let now = +new Date()
// 判斷上次觸發的時間和本次觸發的時間差是否小於時間間隔的閾值
if (now - last < delay) {
// 如果時間間隔小於我們設定的時間間隔閾值,則爲本次觸發操作設立一個新的定時器
clearTimeout(timer)
timer = setTimeout(function () {
last = now
fn.apply(context, args)
}, delay)
} else {
// 如果時間間隔超出了我們設定的時間間隔閾值,那就不等了,無論如何要反饋給用戶一次響應
last = now
fn.apply(context, args)
}
}
}
// 用新的throttle包裝scroll的回調
const better_scroll = throttle(() => console.log('觸發了滾動事件'), 1000)
document.addEventListener('scroll', better_scroll)
在 Vue 裏使用 lodash 中的 Debouncing 和 Throttling
事件節流和防抖是提高性能或降低網絡開銷的好方法。雖然 Vue 1曾經支持對事件的節流和防抖,但是在Vue 2中爲了保持核心的簡單性,刪除對事件的節流和防抖的支持。因此,在Vue 2對對事件進行防抖和節流我們可以使用 lodash
來做。
安裝
可以通過 yarn 或 npm 安裝 lodash。
# Yarn
$ yarn add lodash
# NPM
$ npm install lodash --save
注意:如果我們不想導入
lodash
的所有內容,而只導入所需的部分,則可以通過一些Webpack構建自定義來解決問題。還可以使用lodash.throttle
和lodash.debounce
等軟件包分別安裝和導入lodash
的各個部分。
throttling 方法
要對事件進行節流處理方法非常簡單,只需將要調用的函數包裝在lodash的_.throttle
函數中即可。
<template>
<button @click="throttledMethod()">Click me as fast as you can!</button>
</template>
<script>
import _ from 'lodash'
export default {
methods: {
throttledMethod: _.throttle(() => {
console.log('I get fired every two seconds!')
}, 2000)
}
}
</script>
debouncing 方法
儘管節流在某些情況下很有用,但一般情況我們經常使用的是防抖。防抖實質上將我們的事件分組在一起,並防止它們被頻繁觸發。要在Vue組件中使用節流,只需將要調用的函數包裝在lodash的_.debounce
函數中。
<template>
<button @click="throttledMethod()">Click me as fast as you can!</button>
</template>
<script>
import _ from 'lodash'
export default {
methods: {
throttledMethod: _.debounce(() => {
console.log('I only get fired once every two seconds, max!')
}, 2000)
}
}
</script>
參考:
Throttling and Debouncing in JavaScript
The Difference Between Throttling and Debouncing
Examples of Throttling and Debouncing
Remy Sharp’s blog post on Throttling function calls
前端性能優化原理與實踐
本文作者:前端小智 | 公衆號:大遷世界
專注分享當下最實用的前端技術。關注前端達人,與達人一起學習進步!
長按關注"前端達人"